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

dropdown wont close when click on component that uses stopPropagation #1814

Closed
rinick opened this issue May 10, 2018 · 1 comment · Fixed by #2159
Closed

dropdown wont close when click on component that uses stopPropagation #1814

rinick opened this issue May 10, 2018 · 1 comment · Fixed by #2159
Assignees

Comments

@rinick
Copy link
Contributor

rinick commented May 10, 2018

  1. paste following code in https://bootstrap-vue.js.org/play/
  2. click dropdown
  3. click tab
    drop down is not closed because tab eats the event with stopPropagation()
<b-tabs>
  <b-tab title="first" active>
    <br>I'm the first fading tab
  </b-tab>
  <b-tab title="second">
    <br>I'm the second tab content
  </b-tab>
</b-tabs>
<b-dropdown text="Dropdown Button">
  <b-dropdown-item>First Action</b-dropdown-item>
  <b-dropdown-item>Second Action</b-dropdown-item>
</b-dropdown>

I think it should close on mouseDown or mouseUp event, instead of on click event

@rinick rinick changed the title dropdown conflict with component that use stopPropagation dropdown wont close when click on component that uses stopPropagation May 10, 2018
@tmorehouse tmorehouse self-assigned this Nov 12, 2018
@tmorehouse
Copy link
Member

Actually just a slight modification to the onFocusOut handler will fix this, and basically eliminates the need for click out (since the menu looses focus when something else outside is clicked)

tmorehouse added a commit that referenced this issue Nov 12, 2018
…1814,#1817) (#2159)

* fix(dropdown): add touchstart handler to proper elements

* fix(button): Add aria compliance when tag prop is neither 'button' or 'a'

Ensure that the nonstandard tag is available in tab index and has an appropriate role, and that it is in tab order when not disabled

* fix(button): ensure the appropriate role and tab index set on non links or buttons

Ensure that the nonstandard tag is available in tab index and has an appropriate role, and that it is in tab order when not disabled.

Fixes for ARIA compliance

* dropdown mixin: only enable mouseover events when not inside a navbar-nav

As per latest bootstrap V4 JS

* dropdown mixin: listen for focusout on this.$el rather than this.$refs.menu

Allows for clicking the toggle button to close the menu.

Currently it was closing an immediately re-opening the menu

* dropdown mixin: only add listeners when opened

Eliminates need for listenOnRoot mixin and clickout mixin

* Delete clickout.js

No longer needed mixin

* Update README.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants