df

Bootstrap_new/css/theme-modern.css

@@ -1279,6 +1279,7 @@ select[class*="selectpicker"],
     box-shadow: var(--shadow-lg);
     border-radius: var(--radius-md);
     font-size: 0.82rem;
+    z-index: 9999 !important;
 }
 
 /* 5. ZONE DE RECHERCHE */
@@ -1449,4 +1450,19 @@ select[class*="selectpicker"],
 .dt-buttons {
     display: flex;
     align-items: center;
+}
+
+/* Style pour maintenir la bordure visible quand le filtre est activé */
+.bootstrap-select > button.btn:focus,
+.bootstrap-select > button.btn:active,
+.bootstrap-select.show > button.btn {
+    outline: none !important;
+    border: 2px solid #212e53 !important; /* Votre couleur Primary */
+    box-shadow: 0 0 0 0.25rem rgba(33, 46, 83, 0.25) !important;
+    background-color: #fff !important;
+}
+
+/* Ajustement pour que le conteneur en pointillé ne gêne pas le focus */
+#div_listetables .bootstrap-select {
+    width: 100% !important;
 }

Js/fonctions.js

@@ -48257,45 +48257,32 @@ function cocherDecocherUn(fichier_lister,id){
 function filtreTableReference(numeroTable) {
     const racineWeb = $("#racineWeb").val();
     const $divListe = $("#div_listetables");
-    const $selectOriginal = $("#listetables");
-
-    // 1. Destruction propre de l'instance Selectpicker avant injection
-    // Cela évite que le plugin laisse des traces dans le DOM
-    if ($selectOriginal.length > 0) {
-        $selectOriginal.selectpicker('destroy');
-    }
-
-    // 2. Nettoyage des zones de travail
+    
+    // Nettoyage des zones
     $("#div_lister_table").html("");
     $('#div_maj_table').html("");
-    
-    // 3. Préparation de l'appel AJAX
-    $divListe.css('opacity', '0.5');
 
     $.ajax({
         url: racineWeb + "Ajaxfiltretablesreference/",
-        type: 'post',
+        type : 'post',
         data: { numeroTable: numeroTable },
         success: function(data) {
-            // 4. Injection du nouveau HTML (qui contient le nouveau <select>)
+            // 1. On injecte le contenu
             $divListe.html(data);
 
-            // 5. Ré-initialisation forcée
-            // On utilise un léger délai pour laisser le DOM respirer
+            // 2. On initialise le selectpicker
+            const $select = $("#listetables");
+            $select.selectpicker({
+                liveSearch: true,
+                size: 10,
+                // Force le menu à être attaché au body pour éviter les problèmes de z-index/overflow
+                container: 'body' 
+            });
+
+            // 3. FORCE LE FOCUS sur le bouton du selectpicker (l'élément visible)
             setTimeout(function() {
-                $("#listetables").selectpicker({
-                    liveSearch: true,
-                    size: 10,
-                    style: 'btn-white border-primary-subtle fw-bold'
-                });
-				$("#listetables").focus();
-            }, 50);
-        },
-        error: function() {
-            console.error("Erreur lors du filtrage des tables");
-        },
-        complete: function() {
-            $divListe.css('opacity', '1');
+                $divListe.find('.bootstrap-select button').focus().addClass('focus-ring');
+            }, 100);
         }
     });
 }