Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot use color inputs in b-dropdown with Chrome #4344

Closed
edtownend opened this issue Nov 4, 2019 · 6 comments · Fixed by #4329
Closed

Cannot use color inputs in b-dropdown with Chrome #4344

edtownend opened this issue Nov 4, 2019 · 6 comments · Fixed by #4329

Comments

@edtownend
Copy link

@edtownend edtownend commented Nov 4, 2019

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

  1. Go to the JSFiddle example
  2. Click on 'Dropdown'
  3. Click the color input
  4. Choose a color
  5. 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

Demo link

https://jsfiddle.net/1xkv45nh/

@Hiws

This comment has been minimized.

Copy link

@Hiws Hiws commented 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

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented 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

This comment has been minimized.

Copy link
Author

@edtownend edtownend commented 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

This comment has been minimized.

Copy link

@Hiws Hiws commented 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.

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

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 4, 2019

It appears that PR #4329 will also fix this issue.

It will be available in the next release v2.1.0

tmorehouse added a commit that referenced this issue Nov 8, 2019
…i/Firefox (Fixes #4328, #4344) (#4329)
@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 13, 2019

BootstrapVue v2.1.0 has been released, which has a fix for this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.