reactjs
Autocomplete inside "label" tag.
If we put Autocomplete inside label tag, we will get funny behavior. When we click on item in the list, click event propagates to label tag and input tag gets focus. As a result, list doesn't hide after we click on item. I think event.stopPropagation() on click event solves the problem.
Can you produce a fix for this?
I've tried a couple of different attempts, but I keep coming up short because of how React delegates events. The implicit click handler on <label> is not controlled by React, so the event reaches it before it bubbles all the way up to the root of the React tree, hence making it to late to prevent.
The only immediate solution I can think of if this problem is to be fixed from within Autocomplete is to not use a synthetic event handler for the menu items, but instead attach a regular event listener directly to the DOM node. I would like to avoid this if possible.
