Semantic-ui-react: Search inside Popup does not show results when focused via ref

[gregor-mueller]

Steps

This is a bit complicated see test case but I'll try to explain nontheless:

Code

1. Have a Search with a ref prop inside a Popup
2. Have a Button to trigger the Popup
3. Have a Button to set focus to Search via ref

Execution

1. Click the Button to open the Popup
2. Type into search ('a' will yield results in example)
3. Click outside the results to hide them
4. Click focus-Button to set focus to Search

Expected Result

Results are shown.

Actual Result

Results are not visible.
If you click inside the Search itself the results will become visible again (if search value is still present).

Version

78.2

Testcase

https://codesandbox.io/s/y213jnyykv

[levithomason]

Looks like a bug here. Succinctly, setting the Search input focus programmatically is not opening the results menu.

The onFocus callback is fired when setting focus programmatically, which should open the results menu, but it is not. I'd start by looking at the Search component's focus handler and componentDidUpdate method. That is where the logic for handling open on focus is held.

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[brodybits]

ping

[msrikanth508]

@ffgregormueller I've looked into your issue and debugged Search component thoroughly. Here is the working example (modified yours example slightly), check once.

Resolution
Search component logs document click event to hide search results. Hence, whenever you are clicking on custom Focus button, you need to stop bubbling event to document level. I've added e && e.nativeEvent.stopImmediatePropagation() in setFocus function.

[msrikanth508]

@levithomason Could you please check above comment and close the issue if it's relevant?

[msrikanth508]

@ffgregormueller did you check the solution?

[gregor-mueller]

@msrikanth508 yeah, looks good!
I don't know if it should be added to the Search component itself though. It works the way you've shown in the example but maybe the component should stop propagating the event, if it's a focus event all the time. It could have some side effects though, depending on what you expect in this case.

Thank you for helping me out!

The workaround works for me - I would prefer this to be integrated though.
I think I am not the one to decide whether this should be integrated into SUIR or not so @levithomason feel free to close the issue, if it's not gonna be implemented into the Search component.

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[stale[bot]]

This issue will be closed due to lack of activity for 12 months. If you’d like this to be reopened, just leave a comment; we do monitor them!