Bootstrap 5: Dropdowns

packages/vue-components/src/Dropdown.vue

@@ -2,21 +2,20 @@
   <li
     v-if="isLi"
     ref="dropdown"
-    :class="[{ 'disabled': disabledBool },
-             isLi ? 'dropdown' : 'btn-group', addClass]"
+    :class="[{ 'disabled': disabledBool }, 'dropdown', addClass]"
   >
     <slot name="button">
       <a
         class="dropdown-toggle"
         role="button"
         :class="{'disabled': disabledBool}"
-        @keyup.esc="hideDropdownMenu()"
+        data-bs-toggle="dropdown"
       >
         <slot name="header"></slot>
       </a>
     </slot>
-    <slot name="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-right': menuAlignRight }]">
-      <ul class="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-right': menuAlignRight }]">
+    <slot name="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-end': menuAlignRight }]">
+      <ul class="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-end': menuAlignRight }]">
         <slot></slot>
       </ul>
     </slot>
@@ -29,23 +28,23 @@
   <div
     v-else
     ref="dropdown"
-    :class="[{ 'disabled': disabledBool },
-             isLi ? 'dropdown' : 'btn-group', addClass]"
+    :class="[{ 'disabled': disabledBool }, 'btn-group', addClass]"
   >
     <slot name="before"></slot>
     <slot name="button">
       <button
         type="button"
         class="btn dropdown-toggle"
-        :class="[btnType, btnWithBefore]"
+        :class="[btnType, btnWithBefore, { 'dropdown-toggle-split': hasBefore }]"
         :disabled="disabledBool"
-        @keyup.esc="hideDropdownMenu()"
+        data-bs-reference="parent"
+        data-bs-toggle="dropdown"
       >
         <slot name="header"></slot>
       </button>
     </slot>
-    <slot name="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-right': menuAlignRight }]">
-      <ul class="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-right': menuAlignRight }]">
+    <slot name="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-end': menuAlignRight }]">
+      <ul class="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-end': menuAlignRight }]">
         <slot></slot>
       </ul>
     </slot>
@@ -112,11 +111,11 @@ export default {
     slots() {
       return this.$scopedSlots.default;
     },
+    hasBefore() {
+      return !!this.$scopedSlots.before;
+    },
     btnWithBefore() {
-      if (this.$scopedSlots.before) {
-        return 'btn-with-before';
-      }
-      return '';
+      return this.hasBefore ? 'btn-with-before' : '';
     },
   },
   methods: {
@@ -157,6 +156,10 @@ export default {
   },
   mounted() {
     const $el = $(this.$refs.dropdown);
+    if (this.$slots.button) {
+      // If the button is passed via props, manually add a data-bs-toggle
+      $el.findChildren('.dropdown-toggle').forEach(child => child.setAttribute('data-bs-toggle', 'dropdown'));
+    }
     if (this.show) {
       this.showDropdownMenu();
     }
@@ -199,7 +202,7 @@ export default {
             overscroll-behavior: contain;
         }
 
-        .navbar-default .dropdown-menu-right {
+        .navbar-default .dropdown-menu-end {
             right: auto;
         }
     }

packages/vue-components/src/Navbar.vue

@@ -223,7 +223,7 @@ export default {
     this._navbar = true;
   },
   mounted() {
-    const $dropdown = $('.dropdown>[data-toggle="dropdown"]', this.$el).parent();
+    const $dropdown = $('.dropdown>[data-bs-toggle="dropdown"]', this.$el).parent();
     $dropdown.on('click', '.dropdown-toggle', (e) => {
       e.preventDefault();
       $dropdown.each((content) => {

packages/vue-components/src/Searchbar.vue

@@ -1,16 +1,17 @@
 <template>
-  <div style="position: relative;">
+  <div style="position: relative;" class="dropdown">
     <div v-if="algolia" id="algolia-search-input"></div>
     <input
       v-else
       v-model="value"
+      data-bs-toggle="dropdown"
       type="text"
       class="form-control"
       :placeholder="placeholder"
       autocomplete="off"
       @input="update"
-      @keydown.up="up"
-      @keydown.down="down"
+      @keyup.up="up"
+      @keyup.down="down"
       @keydown.enter="hit"
       @keydown.esc="reset"
       @blur="showDropdown = false"
@@ -179,7 +180,8 @@ export default {
         'dropdown-menu',
         'search-dropdown-menu',
         { show: this.showDropdown },
-        { 'dropdown-menu-right': this.menuAlignRight },
+        { 'd-none': !this.showDropdown },
+        { 'dropdown-menu-end': this.menuAlignRight },
       ];
     },
   },
@@ -253,6 +255,14 @@ export default {
     .form-control {
         min-width: 8em;
     }
+
+    .table-active {
+        background-color: rgba(0, 0, 0, 0.075); /* follows Bootstrap's table-active */
+    }
+
+    .dropdown-menu-end {
+        right: 0;
+    }
 </style>
 
 <style>

packages/vue-components/src/Submenu.vue

@@ -2,13 +2,14 @@
   <li
     ref="submenu"
     :class="[addClass, 'dropdown-submenu',
-             { 'dropright': dropright, 'dropleft': dropleft }]"
+             { 'dropend': dropright, 'dropstart': dropleft }]"
   >
     <slot name="button">
       <a
-        class="submenu-toggle"
+        class="dropdown-item submenu-toggle"
         role="button"
         :class="{disabled: disabled}"
+        data-bs-toggle="dropdown"
       >
         <slot name="header"></slot>
       </a>
@@ -58,7 +59,7 @@ export default {
   methods: {
     hideSubmenu() {
       this.show = false;
-      $(this.$refs.submenu).findChildren('ul').each(ul => ul.classList.toggle('show', false));
+      $(this.$refs.submenu).find('ul.dropdown-menu').each(ul => ul.classList.toggle('show', false));
       this.alignMenuRight();
     },
     showSubmenu() {
@@ -97,23 +98,29 @@ export default {
     $el.onBlur(() => { this.hideSubmenu(); }, false);
     $el.findChildren('a,button').on('click', (e) => {
       e.preventDefault();
-      if (e.target !== e.currentTarget) { e.stopPropagation(); }
-      if (window.innerWidth < 768) {
-        if (this.disabledBool) { return false; }
-        if (this.show) {
-          this.hideSubmenu();
-        } else {
-          this.showSubmenu();
-        }
+      e.stopPropagation();
+      if (this.disabledBool) { return false; }
+      if (this.show) {
+        this.hideSubmenu();
+      } else {
+        this.showSubmenu();
       }
       return false;
     });
     $el.findChildren('a,button').on('mouseover', (e) => {
       e.preventDefault();
       if (window.innerWidth > 767) {
-        if (this.show || this.disabledBool) { return false; }
+        const isShowing = $el.findChildren('ul.show').length > 0;
+        if (isShowing || this.disabledBool) { return false; }
         e.currentTarget.click();
-        this.showSubmenu();
+        const fullMenu = this.$parent.$parent;
+        fullMenu.$children.forEach((menuItem) => {
+          if (menuItem.$el === this.$el) {
+            menuItem.$refs.submenu.showSubmenu();
+          } else {
+            menuItem.$refs.submenu.hideSubmenu();
+          }
+        });
       }
       return false;
     });
@@ -134,10 +141,8 @@ export default {
         position: relative;
     }
 
-    .submenu-toggle {
-        display: inline-block;
-        width: 100%;
-        padding: 0.25rem 0.75rem 0.25rem 1.5rem;
+    .dropdown-submenu ul.dropdown-menu {
+        margin-left: 0;
     }
 
     .dropdown > ul > .dropdown-submenu:last-child > ul,

packages/vue-components/src/__tests__/__snapshots__/Dropdown.spec.js.snap

@@ -7,6 +7,8 @@ exports[`Dropdown with submenu dropdown 1`] = `
 
   <button
     class="btn dropdown-toggle btn-light"
+    data-bs-reference="parent"
+    data-bs-toggle="dropdown"
     type="button"
   >
     Test Dropdown
@@ -52,6 +54,8 @@ exports[`Dropdown with submenu dropdown with one level of submenu 1`] = `
 
   <button
     class="btn dropdown-toggle btn-light"
+    data-bs-reference="parent"
+    data-bs-toggle="dropdown"
     type="button"
   >
     Test Dropdown
@@ -88,11 +92,12 @@ exports[`Dropdown with submenu dropdown with one level of submenu 1`] = `
     </li>
 
     <li
-      class="dropdown-submenu dropright"
+      class="dropdown-submenu dropend"
       haeder="Submenu Level 1"
     >
       <a
-        class="submenu-toggle"
+        class="dropdown-item submenu-toggle"
+        data-bs-toggle="dropdown"
         role="button"
       />
 
@@ -129,6 +134,8 @@ exports[`Dropdown with submenu dropdown with two levels of submenu 1`] = `
 
   <button
     class="btn dropdown-toggle btn-light"
+    data-bs-reference="parent"
+    data-bs-toggle="dropdown"
     type="button"
   >
     Test Dropdown
@@ -138,11 +145,12 @@ exports[`Dropdown with submenu dropdown with two levels of submenu 1`] = `
     class="dropdown-menu"
   >
     <li
-      class="dropdown-submenu dropright"
+      class="dropdown-submenu dropend"
       haeder="Submenu Level 1"
     >
       <a
-        class="submenu-toggle"
+        class="dropdown-item submenu-toggle"
+        data-bs-toggle="dropdown"
         role="button"
       />
 
@@ -168,11 +176,12 @@ exports[`Dropdown with submenu dropdown with two levels of submenu 1`] = `
         </li>
 
         <li
-          class="dropdown-submenu dropright"
+          class="dropdown-submenu dropend"
           haeder="Submenu Level 2"
         >
           <a
-            class="submenu-toggle"
+            class="dropdown-item submenu-toggle"
+            data-bs-toggle="dropdown"
             role="button"
           />