affinipay / react-bootstrap-autosuggest

A modern combo-box built for React and Bootstrap
https://affinipay.github.io/react-bootstrap-autosuggest/
ISC License
56 stars 18 forks source link

onBlur issue #16

Open murphyke opened 6 years ago

murphyke commented 6 years ago

I have an onBlur handler for the autosuggest box that sets state. However, if the blur happens because the user clicked the submit button, the submit event never happens. My understanding is that React cancels events after the blur due to the setting of state.

With a regular onBlur handler I could check the event's relatedTarget and conditionally set the state. However, the autosuggest component only passes its value to the onBlur handler.

I will try delaying the blur handler's functionality with a timeout, but ... I miss the event properties.

murphyke commented 6 years ago

I have a much more accurate description and recipe for reproduction.

Actually, the real problem is that, when the suggestion dropdown-menu ul is displayed and Autosuggest's input element has focus, clicking a submit button doesn't trigger a click/submit event. If the disclosure/toggle button has focus while the menu is displayed, the problem does not occur.

There is one minor and superficially bizarre exception to the above conditions: if the user types nothing but space characters, the problem doesn't occur.

It would be common for a user to type a novel value in the autosuggest box and then click the submit button, so I'd like to help fix this if possible within the next few weeks.

Any tips on what might need changing to fix this?

trevorr commented 6 years ago

I'm traveling without regular internet access, so I won't be able to take a look until I get back in a week or two. I'm afraid I don't have any suggestions in the meantime.

On Fri, Jun 8, 2018, 3:43 AM Kevin Murphy notifications@github.com wrote:

I have a much more accurate description and recipe for reproduction.

Actually, the real problem is that, when the suggestion dropdown-menu ul is displayed and Autosuggest's input element has focus, clicking a submit button doesn't trigger a click/submit event. If the disclosure/toggle button has focus while the menu is displayed, the problem does not occur.

There is one minor and superficially bizarre exception to the above conditions: if the user types nothing but space characters, the problem doesn't occur.

It would be common for a user to type a novel value in the autosuggest box and then click the submit button, so I'd like to help fix this if possible within the next few weeks.

Any tips on what might need changing to fix this?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/affinipay/react-bootstrap-autosuggest/issues/16#issuecomment-395541684, or mute the thread https://github.com/notifications/unsubscribe-auth/AA4r_nxPdNQeWN-8ISnHNz0tPlX-dQjwks5t6YJ8gaJpZM4UbbLx .