search

reactjs / react-autocomplete

WAI-ARIA compliant React autocomplete (combobox) component
MIT License
2.17k stars 532 forks source link

Cannot click option from dropdown if autocomplete is inside scrollable container and not visible #289

Open jmpennala opened 6 years ago

jmpennala commented 6 years ago

This probably relates to issue #240. If Autocomplete is inside a div which is scrollable and input goes outside the view, clicking item scrolls the input back to the view but no item is selected.

Reproduced with version 1.7.2 in Chrome 61.0.3163.100 (Official Build) (64-bit) OS: Mac OS X High Sierra

Tested with static-data-example by wrapping Autocomplete into this: <div style={{ height: '150px', overflow: 'scroll' }}>

CMTegner commented 6 years ago

Hi! There's a fundamental flaw in how the current logic works, in that it doesn't account for nested scrollable panes. I am working on a fix which makes it more resilient.

ChrisSargent commented 6 years ago

Hi, I was having this problem too so I started investigating. Seems it's something to do with the lines

onMouseEnter: () => this.setIgnoreBlur(true),
onMouseLeave: () => this.setIgnoreBlur(false),

in the renderMenu method. If you comment those lines out, it works okay. However, I'm not quite sure of the side-effects of doing so.

Happy to help out on this if I can.

ChrisSargent commented 6 years ago

Or commenting this.refs.input.focus(); in the handleInputBlur method.

CMTegner commented 6 years ago

@ChrisSargent yep, that's correct. However, we want the input to remain focused after the user has selected an item, so the challenge lies in figuring out a solution without removing that behaviour.

Samrat-Saha-Sammy commented 5 years ago

@CMTegner Any Update??