Unable to select scrollbar in a uib-typeahead dropdown inside a uibmodal.
Bug description:
In my project we are using a uib-typeahead to help our users populate document fields. It is working for us just fine except when the uib-typeahead is embedded inside an angular modal component created by angular-aside. When the content for the drop-down is greater than its viewport, a vertical scrollbar appears. Used outside of a modal a user may select the scrollbar and move it up and down (our desired behaviour), but used within a modal selecting the scrollbar causes the drop-down to be dismissed and the entry at the position of the mouse becomes the chosen element (not our desired behaviour).
Link to minimally-working plunker that reproduces the issue:
https://plnkr.co/edit/G6LM9hJH5EqzuJdOGJve?p=info
Steps to reproduce the issue:
- Run plunkr
- In the first window type any key in the text field and then select the scrollbar. This will succeed.
- Second the button to bring up the uibModal, which contains the same typeahead as in step 2. Type any key in the text field and then attempt to select the scrollbar. This will fail.
Version of Angular, UIBS, and Bootstrap
Angular: 1.5.8
UIBS: 2.5.0
Bootstrap: 3.3.7
Hey Kudryk, did you ever find out what causes this issue?
I've investigated a bit today and it appears to be related to the "typeahead-select-on-blur" property being set to true. If you set this to false it no longer prevents you from using the scrollbar in the modal.