Fix dropdowns on bootstrap

Author: rappasoft

resources/views/bootstrap-4/includes/column-select.blade.php

@@ -1,10 +1,27 @@
 @if ($columnSelect)
-    <div class="dropdown mb-3 mb-md-0 pl-0 pl-md-3 d-block d-md-inline">
-        <button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="columnSelect" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <div
+        x-cloak
+        x-data="{ open: false }"
+        @keydown.escape.stop="open = false"
+        @mousedown.away="open = false"
+        class="dropdown mb-3 mb-md-0 pl-0 pl-md-3 d-block d-md-inline"
+    >
+        <button
+            @click="open = !open"
+            class="btn dropdown-toggle d-block w-100 d-md-inline"
+            type="button"
+            id="columnSelect"
+            aria-haspopup="true"
+            aria-expanded="false"
+        >
             @lang('Columns')
         </button>
 
-        <div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="columnSelect">
+        <div
+            class="dropdown-menu dropdown-menu-right w-100"
+            :class="{'show' : open}"
+            aria-labelledby="columnSelect"
+        >
             @foreach($columns as $column)
                 @if ($column->isVisible() && $column->isSelectable())
                     <div wire:key="columnSelect-{{ $loop->index }}">

resources/views/bootstrap-5/includes/column-select.blade.php

@@ -1,10 +1,27 @@
 @if ($columnSelect)
-    <div class="dropdown mb-3 mb-md-0 md-0 ms-md-3 d-block d-md-inline">
-        <button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="columnSelect" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <div
+        x-cloak
+        x-data="{ open: false }"
+        @keydown.escape.stop="open = false"
+        @mousedown.away="open = false"
+        class="dropdown mb-3 mb-md-0 md-0 ms-md-3 d-block d-md-inline"
+    >
+        <button
+            @click="open = !open"
+            class="btn dropdown-toggle d-block w-100 d-md-inline"
+            type="button"
+            id="columnSelect"
+            aria-haspopup="true"
+            aria-expanded="false"
+        >
             @lang('Columns')
         </button>
 
-        <div class="dropdown-menu dropdown-menu-end w-100" aria-labelledby="columnSelect">
+        <div
+            class="dropdown-menu dropdown-menu-end w-100"
+            :class="{'show' : open}"
+            aria-labelledby="columnSelect"
+        >
             @foreach($columns as $column)
                 @if ($column->isVisible() && $column->isSelectable())
                     <div wire:key="columnSelect-{{ $loop->index }}">

resources/views/tailwind/includes/column-select.blade.php

@@ -42,8 +42,13 @@ class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg z-50"
                         @foreach($columns as $column)
                             @if ($column->isVisible() && $column->isSelectable())
                                 <div wire:key="columnSelect-{{ $loop->index }}">
-                                    <label class="px-2 py-1 inline-flex items-center">
+                                    <label
+                                        wire:loading.attr="disabled"
+                                        wire:target="columnSelectEnabled"
+                                        class="px-2 py-1 inline-flex items-center disabled:opacity-50 disabled:cursor-wait"
+                                    >
                                         <input
+                                            class="disabled:opacity-50 disabled:cursor-wait"
                                             wire:model="columnSelectEnabled"
                                             wire:target="columnSelectEnabled"
                                             wire:loading.attr="disabled"