Regression - Multiple Search Dropdown clears search on selection

[AndrewCi]

Hi everyone -

I hope all is well.

I'm facing an issue where the Multiple Search Selection dropdown clears the search after an item is selected. See below for an example:

https://camo.githubusercontent.com/6c62ec71f34fd76cea9db1ee86b43c5871c41732/687474703a2f2f672e7265636f726469742e636f2f4f71716e5a44485235752e676966

According to #1954 this issue was resolved (see here), but it appears there was a regression. When I type "Ma" and select it clears the dropdown search selection. It looks like this is working on the core Semanatic-UI page, but not on the React version.

Best,
Andrew

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[AndrewCi]

Any thoughts or potential direction on how to resolve this? I can take a crack at a PR if it's a simple fix. @levithomason @creedmangrum

[creedmangrum]

Hi @AndrewCi I actually haven't been following this. I'm still using a version where this was working. I'm a bit busy now, but in the next couple days I might be able to take a look. Maybe @levithomason could help out though. My fix that i proposed wasn't originally added as it was fixed from another PR.

[AndrewCi]

Hi creed - thanks for getting back to me. What version are you using? If I could identify I might consider moving to that version as a stopgap.

[layershifter]

@AndrewCi @creedmangrum it's not a regression it's a fix that was done in semantic-ui-react@0.84.0 (#3317) to align the behavior between click and Enter (#2162) & SUI behavior.

To keep previous behavior when searchQuery is kept you can handle searchQuery manually, I made a CodeSandbox: https://codesandbox.io/s/goofy-platform-5mol3?file=/example.js

Please let me know if it works for you 👍

[AndrewCi]

@AndrewCi @creedmangrum it's not a regression it's a fix that was done in semantic-ui-react@0.84.0 (#3317) to align the behavior between click and Enter (#2162) & SUI behavior.

To keep previous behavior when searchQuery is kept you can handle searchQuery manually, I made a CodeSandbox: https://codesandbox.io/s/goofy-platform-5mol3?file=/example.js

Please let me know if it works for you 👍

@layershifter thank you for the response. This works 90%. The only difference between your fix and the standard Semantic UI behavior is that when a user selects a response based on a search query the typed text still appears. For example, if you type in "me" in your example two options appear. In your example when an option is selected "me" still appears in the dropdown; however, in the standard Semantic UI this "me" input is cleared upon selection with the drop down values still loaded.

Any thoughts? I was playing around with the available props and couldn't get the behavior to line up 1:1.

EDIT: To provide an update - I tried playing around w/ a ref to the 'sizer' element with no luck. Hoping that can provide some direction.

[layershifter]

I updated the CodeSandbox to match that behavior: https://codesandbox.io/s/goofy-platform-5mol3?file=/example.js. Is that what you would like to archive?

IMO, it's very confusing especially from accessibility POV as user doesn't know about his input 🤔

[AndrewCi]

@layershifter awesome work thank you so much! This was exactly the behavior I expected and it matches the behavior from the base Semantic UI library. I actually think it's better from a usability perspective - since the results are already loaded upon search you eliminate the need for a user to have to backspace to clear their original search if they have searching for multiple keywords. For example, if I type in "me" which loads 2 results and then I want to search for "cat" I need to backspace twice to clear "me", with this currently iteration you eliminate that backspace step.