Skip to content

Dropdown on navbar is disappearing slowly #6306

@jamipo201

Description

@jamipo201

Describe the bug

When dropdown is on navbar, it delays to disappear when you click outside of the dropdown items when toggled.

Clicking outside of dropdown button when toggled should dismiss the items immediately but it delays few seconds and then disappearing.

Steps to reproduce the bug

<div>
  <b-navbar type="dark" variant="dark">
    <b-navbar-nav>
      <b-nav-item href="#">Home</b-nav-item>

      <!-- Navbar dropdowns -->
      <b-nav-item-dropdown text="Lang" right>
        <b-dropdown-item href="#">EN</b-dropdown-item>
        <b-dropdown-item href="#">ES</b-dropdown-item>
        <b-dropdown-item href="#">RU</b-dropdown-item>
        <b-dropdown-item href="#">FA</b-dropdown-item>
      </b-nav-item-dropdown>

      <b-nav-item-dropdown text="User" right>
        <b-dropdown-item href="#">Account</b-dropdown-item>
        <b-dropdown-item href="#">Settings</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>
  </b-navbar>
</div>
  1. Click dropdown.
  2. When toggled, clicking outside of element dismisses items slowly.

Expected behavior

It should dismiss dropdown items immediately when you click outside of the element.

Versions

Libraries:

  • BootstrapVue: 2.21.2
  • Bootstrap: 4.5.3
  • Vue: 2.6.12

Environment:

  • Device: Mac
  • OS: macOS Bigsur
  • Browser: Chrome
  • Version: 87.0.4280.88

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions