Ability to listen to various events that aren't currently exposed
trickeyone opened this issue · 5 comments
I'm having to directly add a listener to the input element to listen for blur events so I can do a proper check for if a new value has actually been selected, either by hitting "Enter" or by clicking. It would be nice if there was an event for when the dropdown is closed, this way I know that the user is done.
Good point! How does onDropdownOpen
and onDropdownClose
sound?
Sounds good to me. Maybe supply another passthrough for onBlur for the actual input element, too?
@trickeyone Thanks for the feedback. I've added the props onBlur
, onDropdownOpen
, and onDropdownClose
in 0.5.0
. Let me know if they work as expected. 🚀
Just as a note, blur
is fired on Enter
, or when an option is clicked, or when the user clicks somewhere outside of Typeahead
Thanks, @ezequiel ! They look to work well. After a bit of messing around last week, the approach I ended up taking, actually, was to listen for the key down event on the input element. When the user pressed Enter, I looked for an update or when the used selected an option.
My case may be unique but the typeahead is being used as a search/suggestion display rather than a direct change to the input, so I needed to be able to wait for an actual selection from the dropdown list, thus the reason I need to actually listen for the "Enter" key being pressed and not the input element being blurred. I thought blurring would be sufficient but it did not supply the needed granularity to discern if a change had occurred. At this stage, adding an onEnter or onKeyDown (vs onKeyUp since the "Enter" key is not caught) would be more beneficial in my particular case.
As a note, the "Enter" key isn't being cause by the onKeyUp event because of the blur being called from your internal onKeyDown listener, hence my needing to listen for the same event.
This widget is great, but I have a similar need to @trickeyone. I'd expect there to be an onOptionSelected which is fired either when Enter is pressed or when the user selects an option by clicking.