From c8fe33aec8335097ee98ce764002e9182f68dea1 Mon Sep 17 00:00:00 2001
From: nboisteault <nboisteault@3liz.com>
Date: Tue, 1 Oct 2024 16:39:07 +0200
Subject: [PATCH 1/3] BS5: add `form-select` class to <select>

---
 assets/src/components/ActionSelector.js                  | 1 +
 assets/src/components/BaseLayers.js                      | 2 +-
 assets/src/components/MousePosition.js                   | 2 +-
 assets/src/components/Print.js                           | 8 ++++----
 assets/src/components/SelectionTool.js                   | 4 ++--
 assets/src/components/Tooltip.js                         | 2 +-
 assets/src/legacy/atlas.js                               | 4 ++--
 assets/src/legacy/filter.js                              | 4 ++--
 assets/src/legacy/map.js                                 | 4 ++--
 assets/src/legacy/switcher-layers-actions.js             | 4 ++--
 lizmap/app/themes/default/jacl2db_admin/group_create.tpl | 2 +-
 lizmap/modules/action/templates/action_dock.tpl          | 2 +-
 lizmap/modules/admin/templates/user_groups.tpl           | 2 +-
 lizmap/modules/view/templates/map_edition.tpl            | 4 ++--
 lizmap/modules/view/templates/map_measure.tpl            | 2 +-
 lizmap/modules/view/templates/map_permalink.tpl          | 2 +-
 16 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/assets/src/components/ActionSelector.js b/assets/src/components/ActionSelector.js
index 2453a46628..f9e132b762 100644
--- a/assets/src/components/ActionSelector.js
+++ b/assets/src/components/ActionSelector.js
@@ -34,6 +34,7 @@ export default class ActionSelector extends HTMLElement {
 
         // Add the options from the actions object
         const select = this.querySelector('select');
+        select.classList.add('form-select');
         for (let a in this.actions) {
             let action = this.actions[a];
             let option = document.createElement("option");
diff --git a/assets/src/components/BaseLayers.js b/assets/src/components/BaseLayers.js
index dde011f75f..1a8c501436 100644
--- a/assets/src/components/BaseLayers.js
+++ b/assets/src/components/BaseLayers.js
@@ -31,7 +31,7 @@ export default class BaseLayers extends HTMLElement {
         this._template = () => html`
             ${mainLizmap.state.baseLayers.baseLayers.length > 1
                 ? keyed(mainLizmap.state.baseLayers.selectedBaseLayerName, html`
-                <select @change=${(event) => { mainLizmap.state.baseLayers.selectedBaseLayerName = event.target.value }}>
+                <select class="form-select" @change=${(event) => { mainLizmap.state.baseLayers.selectedBaseLayerName = event.target.value }}>
                     ${mainLizmap.state.baseLayers.baseLayers.map((config) =>
                     html`<option ?selected="${mainLizmap.state.baseLayers.selectedBaseLayerName === config.name}" value="${config.name}">${config.type === BaseLayerTypes.Empty ? lizDict['baselayer.empty.title'] : config.title}</option>`
                     )}
diff --git a/assets/src/components/MousePosition.js b/assets/src/components/MousePosition.js
index 9f7130791f..3a773ce7c4 100644
--- a/assets/src/components/MousePosition.js
+++ b/assets/src/components/MousePosition.js
@@ -55,7 +55,7 @@ export default class MousePosition extends HTMLElement {
                 <button class="btn btn-sm" title="${lizDict['mouseposition.removeCenterPoint']}" @click=${() => this._removeCenterPoint()}><i class="icon-refresh"></i></button>
             </div>
             <div class="coords-unit">
-                <select title="${lizDict['mouseposition.select']}" @change=${(event) => { this.displayUnit = event.target.value }}>
+                <select class="form-select" title="${lizDict['mouseposition.select']}" @change=${(event) => { this.displayUnit = event.target.value }}>
                     ${this._qgisProjectProjectionUnits === 'm' ? html`
                     <option selected value="m">${lizDict['mouseposition.units.m']}</option>` : ''}
                     ${ ['ft', 'us-ft'].includes(this._qgisProjectProjectionUnits) ? html`
diff --git a/assets/src/components/Print.js b/assets/src/components/Print.js
index 996663f534..0e0c645c30 100644
--- a/assets/src/components/Print.js
+++ b/assets/src/components/Print.js
@@ -129,12 +129,12 @@ export default class Print extends HTMLElement {
                 </tr>
                 <tr>
                     <td>
-                        <select id="print-template" @change=${(event) => { this.printTemplate = event.target.value }}>
+                        <select id="print-template" class="form-select" @change=${(event) => { this.printTemplate = event.target.value }}>
                             ${this._printTemplates.map((template, index) => html`<option value=${index}>${template.title}</option>`)}
                         </select>
                     </td>
                     <td>
-                        <select id="print-scale" class="btn-print-scales" .value=${this._printScale} @change=${(event) => { this.printScale = parseInt(event.target.value) }}>
+                        <select id="print-scale" class="btn-print-scales form-select" .value=${this._printScale} @change=${(event) => { this.printScale = parseInt(event.target.value) }}>
                             ${this._printScales.map( scale => html`<option .selected=${scale === this._printScale} value=${scale}>${scale.toLocaleString()}</option>`)}
                         </select>
                     </td>
@@ -157,7 +157,7 @@ export default class Print extends HTMLElement {
                 ${this.printDPIs.length > 1 ? keyed(this.defaultDPI, html`
                 <div class="print-dpi">
                     <span>${lizDict['print.toolbar.dpi']}</span>
-                    <select class="btn-print-dpis" .value=${this.defaultDPI} @change=${(event) => { this._printDPI = event.target.value }}>
+                    <select class="btn-print-dpis form-select" .value=${this.defaultDPI} @change=${(event) => { this._printDPI = event.target.value }}>
                         ${this.printDPIs.map( dpi => html`<option ?selected=${dpi === this.defaultDPI} value=${dpi}>${dpi}</option>`)}
                     </select>
                 </div>`) : ''}
@@ -184,7 +184,7 @@ export default class Print extends HTMLElement {
             </details>
             <div class="flex">
                 ${this.printFormats.length > 1 ? keyed(this.defaultFormat, html`
-                <select id="print-format" title="${lizDict['print.toolbar.format']}" class="btn-print-format" .value=${this.defaultFormat} @change=${(event) => { this._printFormat = event.target.value }}>
+                <select id="print-format" title="${lizDict['print.toolbar.format']}" class="btn-print-format form-select" .value=${this.defaultFormat} @change=${(event) => { this._printFormat = event.target.value }}>
                     ${this.printFormats.map( format => html`<option ?selected=${format === this.defaultFormat} value="${format}">${format.toUpperCase()}</option>`)}
                 </select>`) : ''}
                 <button id="print-launch" class="btn-print-launch btn btn-primary flex-grow-1" @click=${() => { this._launch() }}>${lizDict['print.launch']}</button>
diff --git a/assets/src/components/SelectionTool.js b/assets/src/components/SelectionTool.js
index d440f659f2..4e2ec0a136 100644
--- a/assets/src/components/SelectionTool.js
+++ b/assets/src/components/SelectionTool.js
@@ -33,7 +33,7 @@ export default class SelectionTool extends HTMLElement {
             <div class="menu-content">
                 <div>${lizDict['selectiontool.toolbar.layer']}</div>
                 <div>
-                    <select class="selectiontool-layer-list" @change=${ (event) => mainLizmap.selectionTool.allFeatureTypeSelected = event.target.value}>
+                    <select class="selectiontool-layer-list form-select" @change=${ (event) => mainLizmap.selectionTool.allFeatureTypeSelected = event.target.value}>
                         <optgroup label="${lizDict['selectiontool.toolbar.layers.single']}">
                             ${mainLizmap.selectionTool.layers.map((layer) => html`<option value="${layer.name}">${layer.title}</option>`)}
                         </optgroup>
@@ -52,7 +52,7 @@ export default class SelectionTool extends HTMLElement {
                     </label>
                 </div>
                 <div>
-                    <select class="selection-geom-operator" @change=${ (event) => mainLizmap.selectionTool.geomOperator = event.target.value} data-bs-toggle="tooltip" data-bs-title="${lizDict['selectiontool.toolbar.geomOperator']}">
+                    <select class="selection-geom-operator form-select" @change=${ (event) => mainLizmap.selectionTool.geomOperator = event.target.value} data-bs-toggle="tooltip" data-bs-title="${lizDict['selectiontool.toolbar.geomOperator']}">
                         <option value="intersects">${lizDict['selectiontool.toolbar.geomOperator.intersects']}</option>
                         <option value="within">${lizDict['selectiontool.toolbar.geomOperator.within']}</option>
                         <option value="overlaps">${lizDict['selectiontool.toolbar.geomOperator.overlaps']}</option>
diff --git a/assets/src/components/Tooltip.js b/assets/src/components/Tooltip.js
index c225e82985..d7b6729d15 100644
--- a/assets/src/components/Tooltip.js
+++ b/assets/src/components/Tooltip.js
@@ -11,7 +11,7 @@ export default class Tooltip extends HTMLElement {
         this._tooltipLayersCfgs = mainLizmap.initialConfig.tooltipLayers.layerConfigs;
 
         this._template = () => html`
-            <select @change=${ event => { mainLizmap.tooltip.activate(event.target.value) }}>
+            <select class="form-select" @change=${ event => { mainLizmap.tooltip.activate(event.target.value) }}>
                 <option value="">---</option>
                 ${this._tooltipLayersCfgs.map(tooltipLayerCfg =>
                     html`<option ?selected=${this._tooltipLayersCfgs.length === 1} value="${tooltipLayerCfg.order}">${mainLizmap.state.layersAndGroupsCollection.getLayerByName(tooltipLayerCfg.name).title}</option>`
diff --git a/assets/src/legacy/atlas.js b/assets/src/legacy/atlas.js
index 1300ae3f83..95c610c35a 100644
--- a/assets/src/legacy/atlas.js
+++ b/assets/src/legacy/atlas.js
@@ -263,7 +263,7 @@ import DOMPurify from 'dompurify';
 
                 // Add combobox with all data
                 home += '<p style="padding:0px 10px;">';
-                home += '<select id="liz-atlas-select">';
+                home += '<select id="liz-atlas-select" class="form-select">';
                 home += '<option value="-1"> --- </option>';
                 var pkey_field = lizAtlasConfig['primaryKey'];
                 for (var i in lizAtlasConfig['features_sorted']) {
@@ -306,7 +306,7 @@ import DOMPurify from 'dompurify';
                 // Multiple atlas
                 if (lizAtlasConfigArray.length > 1){
                     // Build select to choose between atlas layers
-                    atlasHTML = '<i class="icon-globe icon-white" style="margin-right: 4px;vertical-align: baseline;"></i><select id="select-atlas-layer">';
+                    atlasHTML = '<i class="icon-globe icon-white" style="margin-right: 4px;vertical-align: baseline;"></i><select id="select-atlas-layer" class="form-select">';
                     for (let i = 0; i < lizAtlasConfigArray.length; i++) {
                         atlasHTML += '<option value="' + lizAtlasConfigArray[i].layerId + '">' + lizMap.config.layers[lizAtlasConfigArray[i].layername]['title'] + '</option>';
                     }
diff --git a/assets/src/legacy/filter.js b/assets/src/legacy/filter.js
index e6815e63e0..1b5ced9e21 100644
--- a/assets/src/legacy/filter.js
+++ b/assets/src/legacy/filter.js
@@ -28,7 +28,7 @@ var lizLayerFilterTool = function () {
 
                 html += '<div class="menu-content">';
                 // Add combo box to select the layer
-                html += '<select id="liz-filter-layer-selector">';
+                html += '<select id="liz-filter-layer-selector" class="form-select">';
                 var flayers = {};
                 for (var o in globalThis['filterConfig']) {
                     var conf = globalThis['filterConfig'][o];
@@ -504,7 +504,7 @@ var lizLayerFilterTool = function () {
                     html += getFormFieldHeader(field_item);
 
                     if (field_item.format == 'select') {
-                        html += '<select id="liz-filter-field-' + lizMap.cleanName(field_item.title) + '" class="liz-filter-field-select">';
+                        html += '<select id="liz-filter-field-' + lizMap.cleanName(field_item.title) + '" class="liz-filter-field-select form-select">';
                         html += '<option value=""> --- </option>';
                         html += '</select>';
                     }
diff --git a/assets/src/legacy/map.js b/assets/src/legacy/map.js
index ae32687c1e..4b313b9631 100644
--- a/assets/src/legacy/map.js
+++ b/assets/src/legacy/map.js
@@ -986,7 +986,7 @@ window.lizMap = function() {
 
 
                 // add filter values list
-                $('#locate-layer-'+layerName).parent().before('<div class="locate-layer"><select id="locate-layer-'+layerName+'-'+locate.filterFieldName+'">'+fOptions+'</select></div><br/>');
+                $('#locate-layer-'+layerName).parent().before('<div class="locate-layer"><select class="form-select" id="locate-layer-'+layerName+'-'+locate.filterFieldName+'">'+fOptions+'</select></div><br/>');
                 // listen to filter select changes
                 $('#locate-layer-'+layerName+'-'+locate.filterFieldName).change(function(){
                     var filterValue = $(this).children(':selected').val();
@@ -1141,7 +1141,7 @@ window.lizMap = function() {
             var lname = locateByLayerList[l];
             var lConfig = config.layers[lname];
             var html = '<div class="locate-layer">';
-            html += '<select id="locate-layer-' + cleanName(lname) + '" class="label">';
+            html += '<select id="locate-layer-' + cleanName(lname) + '" class="label form-select">';
             html += '<option>' + lConfig.title + '...</option>';
             html += '</select>';
             html += '</div>';
diff --git a/assets/src/legacy/switcher-layers-actions.js b/assets/src/legacy/switcher-layers-actions.js
index d22ae05b99..22704be861 100644
--- a/assets/src/legacy/switcher-layers-actions.js
+++ b/assets/src/legacy/switcher-layers-actions.js
@@ -142,7 +142,7 @@ var lizLayerActionButtons = function() {
                     html+= '        <dt>'+lizDict['layer.metadata.style.title']+'</dt>';
                     html+= '<dd>';
                     html+= '<input type="hidden" class="styleLayer '+isBaselayer+'" value="'+aName+'">';
-                    html+= '<select class="styleLayer '+isBaselayer+'">';
+                    html+= '<select class="styleLayer form-select '+isBaselayer+'">';
                     html+= options;
                     html+= '</select>';
                     html+= '</dd>';
@@ -184,7 +184,7 @@ var lizLayerActionButtons = function() {
                 if( options != '' && layerConfig.typename != undefined) {
                     html+= '        <dt>'+lizDict['layer.metadata.export.title']+'</dt>';
                     html+= '<dd>';
-                    html+= '<select class="exportLayer '+isBaselayer+'">';
+                    html+= '<select class="exportLayer form-select '+isBaselayer+'">';
                     html+= options;
                     html+= '</select>';
                     html+= '<button class="btn btn-sm exportLayer '+isBaselayer+'" title="'+lizDict['layer.metadata.export.title']+'" value="'+aName+'"><i class="icon-download"></i></button>';
diff --git a/lizmap/app/themes/default/jacl2db_admin/group_create.tpl b/lizmap/app/themes/default/jacl2db_admin/group_create.tpl
index 48d2fb9a1d..2c5a458d82 100644
--- a/lizmap/app/themes/default/jacl2db_admin/group_create.tpl
+++ b/lizmap/app/themes/default/jacl2db_admin/group_create.tpl
@@ -15,7 +15,7 @@
     </tr>
     <tr>
         <td><label for="rights-copy">{@acl2.group.copy.label@}</label></td>
-        <td><select id="rights-copy" name="rights-copy">
+        <td><select id="rights-copy" name="rights-copy" class="form-select">
             <option value=""></option>
             {foreach $groups as $group}
                 <option value="{$group->id_aclgrp}">{$group->name}</option>
diff --git a/lizmap/modules/action/templates/action_dock.tpl b/lizmap/modules/action/templates/action_dock.tpl
index a0382a9fb8..91cd256af1 100644
--- a/lizmap/modules/action/templates/action_dock.tpl
+++ b/lizmap/modules/action/templates/action_dock.tpl
@@ -19,7 +19,7 @@
 <template id="lizmap-action-item-list">
     <!-- div containing the select and the selected item description -->
     <div class="action-selector-container">
-        <select class="action-select">
+        <select class="action-select form-select">
             <option value="">-- {@action~action.dock.form.select.emptyItem.label@} -- </option>
         </select>
         <div class="action-description" data-default-value="{@action~action.dock.action.choose@}">
diff --git a/lizmap/modules/admin/templates/user_groups.tpl b/lizmap/modules/admin/templates/user_groups.tpl
index 7e849c631d..dc2a11f6bd 100644
--- a/lizmap/modules/admin/templates/user_groups.tpl
+++ b/lizmap/modules/admin/templates/user_groups.tpl
@@ -26,7 +26,7 @@
 <form action="{formurl 'admin~acl:addgroup', array('user'=>$user)}" method="post">
     {formurlparam}
     <label for="user-add-group">{@admin~user.acl.form.add.to.group@}</label>
-    <select name="grpid" id="user-add-group">
+    <select name="grpid" id="user-add-group" class="form-select">
         {foreach $groups as $group}
             <option value="{$group->id_aclgrp}">{$group->name}</option>
         {/foreach}
diff --git a/lizmap/modules/view/templates/map_edition.tpl b/lizmap/modules/view/templates/map_edition.tpl
index 2f527a9347..b3dccaf3d0 100644
--- a/lizmap/modules/view/templates/map_edition.tpl
+++ b/lizmap/modules/view/templates/map_edition.tpl
@@ -6,7 +6,7 @@
         </p>
         <div id="edition-creation">
             <div>
-                <select id="edition-layer"></select>
+                <select id="edition-layer" class="form-select"></select>
             </div>
 
             <a id="edition-draw" class="btn btn-sm" href="#"
@@ -76,7 +76,7 @@
                                             id="edition-point-coord-crs-label">{@view~edition.point.coord.crs.label@}</label>
                                         <div class="controls">
                                             <select name="coord-crs" id="edition-point-coord-crs"
-                                                class="jforms-ctrl-menulist">
+                                                class="jforms-ctrl-menulist form-select">
                                                 <option value="4326" selected="selected"><span>EPSG:4326</span></option>
                                                 <option id="edition-point-coord-crs-layer" value="" style="display:none;">
                                                 </option>
diff --git a/lizmap/modules/view/templates/map_measure.tpl b/lizmap/modules/view/templates/map_measure.tpl
index c74ff0ed53..7a40e2474d 100644
--- a/lizmap/modules/view/templates/map_measure.tpl
+++ b/lizmap/modules/view/templates/map_measure.tpl
@@ -1,7 +1,7 @@
 <div class="measure">
   <h3><span class="title"><button id="measure-stop" class="btn btn-stop btn-sm btn-error btn-link" title="{@view~map.toolbar.content.stop@}">×</button><span class="icon"></span>&nbsp;<span class="text">{@view~map.measure.toolbar.title@}</span></span></h3>
   <div class="menu-content">
-    <select id="measure-type">
+    <select id="measure-type" class="form-select">
       <option value="length">{@view~map.measure.toolbar.length@}</option>
       <option value="area">{@view~map.measure.toolbar.area@}</option>
       <option value="perimeter">{@view~map.measure.toolbar.perimeter@}</option>
diff --git a/lizmap/modules/view/templates/map_permalink.tpl b/lizmap/modules/view/templates/map_permalink.tpl
index c676411515..3dc3161913 100644
--- a/lizmap/modules/view/templates/map_permalink.tpl
+++ b/lizmap/modules/view/templates/map_permalink.tpl
@@ -24,7 +24,7 @@
             </div>
             <div id="tab-embed-permalink" class="permalink-tab-pane-embed tab-pane" role="tabpanel">
                 <a href="{jfullurl 'view~embed:index', array('repository'=>$repository,'project'=>$project)}" target="_blank" id="permalink-embed" style="display:none;"></a>
-                <select id="select-embed-permalink" class="permalink-embed-select" style="width:auto;">
+                <select id="select-embed-permalink" class="permalink-embed-select form-select" style="width:auto;">
                     <option value="s">{@view~map.permalink.embed.size.small@}</option>
                     <option value="m">{@view~map.permalink.embed.size.medium@}</option>
                     <option value="l">{@view~map.permalink.embed.size.large@}</option>

From 710ed6ccc67f1ef9ff0f0830aee806221a415709 Mon Sep 17 00:00:00 2001
From: nboisteault <nboisteault@3liz.com>
Date: Tue, 1 Oct 2024 17:47:35 +0200
Subject: [PATCH 2/3] BS5: selection tool dropdown and tooltips

---
 assets/src/components/SelectionTool.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/assets/src/components/SelectionTool.js b/assets/src/components/SelectionTool.js
index 4e2ec0a136..04426d3ab5 100644
--- a/assets/src/components/SelectionTool.js
+++ b/assets/src/components/SelectionTool.js
@@ -83,15 +83,15 @@ export default class SelectionTool extends HTMLElement {
                     </button>
                     <lizmap-selection-invert></lizmap-selection-invert>
                     ${this.hasAttribute('layer-export') ? html`
-                        <div class="btn-group dropup selectiontool-export" role="group" data-bs-toggle="tooltip" data-bs-title="${mainLizmap.selectionTool.isExportable ? '' : lizDict['switcher.layer.export.warn']}">
+                        <div class="btn-group dropup selectiontool-export" role="group" title="${mainLizmap.selectionTool.isExportable ? '' : lizDict['switcher.layer.export.warn']}">
                             <button type="button" class="btn btn-sm dropdown-toggle" ?disabled=${ !mainLizmap.selectionTool.isExportable } data-bs-toggle="dropdown" aria-expanded="false">
                                 ${lizDict['switcher.layer.export.title']}
                             <span class="caret"></span>
                             </button>
                             <ul class="selectiontool-export-formats dropdown-menu dropdown-menu-right" role="menu">
-                                <li><a href="#" class="btn-export-selection">GeoJSON</a></li>
-                                <li><a href="#" class="btn-export-selection">GML</a></li>
-                                ${mainLizmap.selectionTool.exportFormats.map((format) => html`<li><a href="#" class="btn-export-selection">${format}</a></li>`)}
+                                <li><a href="#" class="btn-export-selection dropdown-item">GeoJSON</a></li>
+                                <li><a href="#" class="btn-export-selection dropdown-item">GML</a></li>
+                                ${mainLizmap.selectionTool.exportFormats.map((format) => html`<li><a href="#" class="btn-export-selection dropdown-item">${format}</a></li>`)}
                             </ul>
                         </div>` : ''
                     }
@@ -103,9 +103,7 @@ export default class SelectionTool extends HTMLElement {
 
         // Add tooltip on buttons
         // TODO allow tooltip on disabled buttons : https://stackoverflow.com/a/19938049/2000654
-        $('.menu-content button, .menu-content .selectiontool-export, .selection-geom-operator', this).tooltip({
-            placement: 'top'
-        });
+        $('.selection-geom-operator, .selectiontool-actions .btn', this).tooltip();
 
         // Export
         this.querySelectorAll('.btn-export-selection').forEach(exportbtn => {

From a45e995a3b4da30f1e565e01afdad2b3fed2fdfc Mon Sep 17 00:00:00 2001
From: nboisteault <nboisteault@3liz.com>
Date: Tue, 1 Oct 2024 18:08:06 +0200
Subject: [PATCH 3/3] BS5: migrate remaining dropdowns

---
 assets/src/components/FeatureToolbar.js | 14 ++++++--------
 assets/src/components/SelectionTool.js  |  1 -
 assets/src/legacy/attributeTable.js     |  5 ++---
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/assets/src/components/FeatureToolbar.js b/assets/src/components/FeatureToolbar.js
index 9515702a3e..eaee43c923 100644
--- a/assets/src/components/FeatureToolbar.js
+++ b/assets/src/components/FeatureToolbar.js
@@ -57,13 +57,12 @@ export default class FeatureToolbar extends HTMLElement {
 
             ${this.isFeatureExportable
                 ? html`<div class="btn-group feature-export">
-                        <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-toggle="tooltip" data-bs-title="${lizDict['attributeLayers.toolbar.btn.data.export.title']}">
+                        <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="${lizDict['attributeLayers.toolbar.btn.data.export.title']}">
                             <i class="icon-download"></i>
-                            <span class="caret"></span>
                         </button>
-                        <ul class="dropdown-menu pull-right" role="menu">
+                        <ul class="dropdown-menu">
                             ${this._downloadFormats.map((format) =>
-                                html`<li><a href="#" @click=${() => this.export(format)}>${format}</a></li>`)}
+                                html`<li><a class="dropdown-item" href="#" @click=${() => this.export(format)}>${format}</a></li>`)}
                         </ul>
                     </div>`
                 : ''
@@ -104,13 +103,12 @@ export default class FeatureToolbar extends HTMLElement {
             ${this.editableChildrenLayers.length
                 ? html`
                 <div class="btn-group feature-create-child" style="margin-left: 0px;">
-                    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-title="${lizDict['attributeLayers.toolbar.btn.data.createFeature.title']}">
+                    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="${lizDict['attributeLayers.toolbar.btn.data.createFeature.title']}">
                         <i class="icon-plus-sign"></i>
-                        <span class="caret"></span>
                     </button>
-                    <ul class="dropdown-menu" role="menu">
+                    <ul class="dropdown-menu">
                         ${this.editableChildrenLayers.map((child) =>
-                            html`<li><a data-child-layer-id="${child.layerId}" @click=${() => this.createChild(child)}>${child.title}</a></li>`)}
+                            html`<li><a class="dropdown-item" href="#" data-child-layer-id="${child.layerId}" @click=${() => this.createChild(child)}>${child.title}</a></li>`)}
                     </ul>
                 </div>
                 `
diff --git a/assets/src/components/SelectionTool.js b/assets/src/components/SelectionTool.js
index 04426d3ab5..a2869252ea 100644
--- a/assets/src/components/SelectionTool.js
+++ b/assets/src/components/SelectionTool.js
@@ -86,7 +86,6 @@ export default class SelectionTool extends HTMLElement {
                         <div class="btn-group dropup selectiontool-export" role="group" title="${mainLizmap.selectionTool.isExportable ? '' : lizDict['switcher.layer.export.warn']}">
                             <button type="button" class="btn btn-sm dropdown-toggle" ?disabled=${ !mainLizmap.selectionTool.isExportable } data-bs-toggle="dropdown" aria-expanded="false">
                                 ${lizDict['switcher.layer.export.title']}
-                            <span class="caret"></span>
                             </button>
                             <ul class="selectiontool-export-formats dropdown-menu dropdown-menu-right" role="menu">
                                 <li><a href="#" class="btn-export-selection dropdown-item">GeoJSON</a></li>
diff --git a/assets/src/legacy/attributeTable.js b/assets/src/legacy/attributeTable.js
index b1f7ee8345..aff1a18359 100644
--- a/assets/src/legacy/attributeTable.js
+++ b/assets/src/legacy/attributeTable.js
@@ -1144,7 +1144,7 @@ var lizAttributeTable = function() {
                                 childCreateButtonItems.push(childButtonItem);
 
                                 // Link parent with the selected features of the child
-                                layerLinkButtonItems.push('<li><a href="#' + lizMap.cleanName(isNToM ? pivotConfig[0] : childLayerName) + '" class="btn-linkFeatures-attributeTable">' + (isNToM ? pivotConfig[1].title : childLayerConfig.title) +'</a></li>' );
+                                layerLinkButtonItems.push('<li><a href="#' + lizMap.cleanName(isNToM ? pivotConfig[0] : childLayerName) + '" class="btn-linkFeatures-attributeTable dropdown-item">' + (isNToM ? pivotConfig[1].title : childLayerConfig.title) +'</a></li>' );
                             }
                         }
                     }
@@ -1163,9 +1163,8 @@ var lizAttributeTable = function() {
                         layerLinkButton+= '&nbsp;<div class="btn-group" role="group" >';
                         layerLinkButton+= '    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">';
                         layerLinkButton+= lizDict['attributeLayers.toolbar.btn.data.linkFeatures.title'];
-                        layerLinkButton+= '      <span class="caret"></span>';
                         layerLinkButton+= '    </button>';
-                        layerLinkButton+= '    <ul class="dropdown-menu" role="menu">';
+                        layerLinkButton+= '    <ul class="dropdown-menu">';
                         for( var i in  layerLinkButtonItems){
                             var li = layerLinkButtonItems[i];
                             layerLinkButton+= li;