reactjs
Cannot click option from dropdown if autocomplete is inside scrollable container and not visible
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' }}>
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.
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 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.
