Repository navigation
Cannot use color inputs in b-dropdown with Chrome #4344
Description
Hi, first, thanks for a great package! We've got a color input inside a b-dropdown that has stopped working in Chrome since updating to the 2.0.x version. The reason appears to be that Chrome's colour picker opens a new window, which triggers a loss of focus to the dropdown and it, therefore, closes before the user can
Steps to reproduce the bug
- Go to the JSFiddle example
- Click on 'Dropdown'
- Click the color input
- Choose a color
- The chosen colour will not be reflected next to 'selected color:' or if you reopen the drodown
Expected behavior
The dropdown should remain open while the user chooses a colour.
Versions
Libraries:
- BootstrapVue: 2.0.4#
- Bootstrap: 4.3.1
- Vue: 2.6.10
Environment:
- Device: Mac
- OS: 10.14.6
- Browser: Chrome
- Version: 78
Activity
Hiws commentedon Nov 4, 2019
There might be a better way, but this seems to be a working workaround for the time being.
Hope it helps.
https://jsfiddle.net/rao4m8gv/
I've only tested it in Chrome.
tmorehouse commentedon Nov 4, 2019
This appears to be a race condition with the menu closing when the focus moves out of the menu to the native color picker dialog, as the menu normally closes when it looses focus.
Although I don't understand by Vue doesn't update the v-model when the menu is closes, as the input still exists in the DOM
I'm guessing that there might be a similar issue with a file input (which also opens a broswer native dialog)
edtownend commentedon Nov 4, 2019
Cheers @Hiws, that does work so I'll use that for now. It doesn't seem the second color input outside of the dropdown is necessary, just the
isPickingColor.Hiws commentedon Nov 4, 2019
Yeah sorry, i went through a few edits after posting the first one since i realised i made a mistake. The current one in the reply should be the most recent one
tmorehouse commentedon Nov 4, 2019
It appears that PR #4329 will also fix this issue.
It will be available in the next release v2.1.0
fix(b-dropdown): handle issue with touch devices on MacOS using Safar…
tmorehouse commentedon Nov 13, 2019
BootstrapVue
v2.1.0has been released, which has a fix for this issue.