React-bootstrap-typeahead: onBlur triggers on menu item click

[AmitBu]

Hello,
I encountered an issue, the onBlur event is being triggered, when clicking on the menu items.
This causes onChange to not being triggered.

Is there any workaround?
Thanks!

[AmitBu]

I found a workaround,
Wrapping the content of the onBlur callback function in a setTimeout, makes the onBlur function run after onChange.

[ericgio]

I don't reproduce this issue on either the 0.10.x example or the 1.0.0 example. Can you please provide repro steps? Thanks.

[AmitBu]

Sorry for the delay,
I'm using version 1.0.0-beta4.

The onBlur callback function disables the edit mode state, which hides the component.
When typing, the suggestion menu appears, after clicking on an item (with the mouse), the onBlur calls before the item was chosen, and hides the input.

I've created a sample: http://www.webpackbin.com/VJ25bcyIz

Look at the console when clicking on an item and see what happens.

Thanks!

[ericgio]

I'd argue that this is the expected behavior, since the input blur event logically happens before the click event. Given that it's not a bug, I'm going to close this out. If you need additional help with your problem, can you please ask on StackOverflow or a similar forum? You can post the link back here so I'll be notified.

[AmitBu]

I already found a solution, as I mentioned in the first comment.
Just thought it's a bug in the component, but I accept your answer.
Thanks.

[ericgio]

Using the component's onBlur handler with setTimeout is probably not advisable, btw. Try something like react-onclickoutside.

Here's how you might use it: http://www.webpackbin.com/41kYAZeUG

[aaronzimmerman]

@ericgio I'm having the same issue - would you be able to recreate that "here's how you might use it?" The link is now dead.

[ericgio]

@aaronzimmerman: I honestly don't remember what it was. I I think I had just modified the original webpackbin. Can you post a code example?

[aaronzimmerman]

@ericgio The issue is that when you click on a typeahead option, the onBlur event for the text input fires and this seems to prevent the click event on the desired option from firing. The net effect is having to double click to get an option selected with the mouse.

It looks like its a side effect of the onBlur passed in from redux-form. I'm not sure how involved an entire code example would be but it isn't that big of a deal so I'll just keep the workaround for now.

I was able to fix by delaying the onBlur as indicated above, but was curious about your suggestion.

[knnemade99]

Hi aaronzimmerman,
I am facing the same problem , can you please help me by providing your workaround
Above give link is not valid.
Thanks in advance

[AmitBu]

Hi, if I remember correctly, the original solution that @ericgio suggested was to use react-onclickoutside, and use the 'handleClickOutside()' callback to run the desired code, instead of the onBlur event callback.
Hope it helps someone :)

[knnemade99]

Can anyone help me with code how to do that. ?
I tried using react-onclickoutside , but that method was calling everytime even when clicked inside the component.