Autosuggest: use something other than state.dropDownItems.length > 0 to filter document clicks

[brian-smith-tcril]

In #1732 I noticed

there is also no error message if text is entered that doesn't match anything in the dropdown (for example, typing "foo" in any of the sample boxes)

it seems this is happening because we have state.dropDownItems.length > 0 in

paragon/src/Form/FormAutosuggest.jsx

Line 115 in 13b7488

if (parentRef.current && !parentRef.current.contains(e.target) && state.dropDownItems.length > 0) {

where we are handling all clicks on the document

if we remove state.dropDownItems.length > 0 and instead just have

if (parentRef.current && !parentRef.current.contains(e.target)) {

interacting with any autosuggest component on the docs page causes error states in the others

I believe the intention here is to not set the error state on components other than the one the user is interacting with. This implies that state.dropDownItems.length > 0 is being used to mean "this is the autosuggest component the user is interacting with right now."

In the case where we have entered text that filters the dropdownitems down to a length of zero, the component behaves as if it is not the one the user is interacting with, and doesn't show an error.

We should not rely on state.dropDownItems.length > 0 to mean "this is the autosuggest component the user is interacting with right now," as it is possible to filter the dropDownItems down to a length of zero while interacting with the component.

[edx-semantic-release]

🎉 This issue has been resolved in version 21.1.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[edx-semantic-release]

🎉 This issue has been resolved in version 22.0.0-alpha.6 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀