Closes #1273 Closes #3848: Allow multiple select menus on the same page

modules/custom/az_select_menu/js/az-select-menu.es6.js

@@ -8,45 +8,47 @@
     attach(context, settings) {
       //  az_select_menu form id's are added in an array depending
       //  on the page you are on, and how many select menus are on the page.
-      for (let i = 0; i < settings.azSelectMenu.ids.length; i++) {
-        const selectFormId = settings.azSelectMenu.ids[i];
-        const selectForm = document.querySelector(`#${selectFormId}`);
-        once('azSelectMenu', selectForm, context).forEach((element) => {
-          $(element).popover();
-          element.addEventListener('focus', (event) => {
-            Drupal.azSelectMenu.handleEvents(event);
+      Object.keys(settings.azSelectMenu.ids).forEach(function (property) {
+        if (settings.azSelectMenu.ids.hasOwnProperty(property)) {
+          const selectFormId = settings.azSelectMenu.ids[property];
+          const selectForm = document.querySelector(`#${selectFormId}`);
+          once('azSelectMenu', selectForm, context).forEach((element) => {
+            $(element).popover();
+            element.addEventListener('focus', (event) => {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            element.addEventListener('change', (event) => {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            element.addEventListener('mouseenter', (event) => {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            const button = element.querySelector('button');
+            button.addEventListener('click', (event) => {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            button.addEventListener('touchstart', (event) => {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            button.addEventListener('mouseenter', (event) => {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            button.addEventListener('mouseleave', (event) => {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            button.addEventListener('focus', (event) => {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            button.addEventListener('blur', (event) => {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            document.addEventListener('touchstart', (event) => {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            element.classList.add('processed');
           });
-          element.addEventListener('change', (event) => {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          element.addEventListener('mouseenter', (event) => {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          const button = element.querySelector('button');
-          button.addEventListener('click', (event) => {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          button.addEventListener('touchstart', (event) => {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          button.addEventListener('mouseenter', (event) => {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          button.addEventListener('mouseleave', (event) => {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          button.addEventListener('focus', (event) => {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          button.addEventListener('blur', (event) => {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          document.addEventListener('touchstart', (event) => {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          element.classList.add('processed');
-        });
-      }
+        }
+      });
     },
   };
 

modules/custom/az_select_menu/js/az-select-menu.js

@@ -14,45 +14,47 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
   Drupal.azSelectMenu = Drupal.azSelectMenu || {};
   Drupal.behaviors.azSelectMenu = {
     attach: function attach(context, settings) {
-      for (var i = 0; i < settings.azSelectMenu.ids.length; i++) {
-        var selectFormId = settings.azSelectMenu.ids[i];
-        var selectForm = document.querySelector("#".concat(selectFormId));
-        once('azSelectMenu', selectForm, context).forEach(function (element) {
-          $(element).popover();
-          element.addEventListener('focus', function (event) {
-            Drupal.azSelectMenu.handleEvents(event);
+      Object.keys(settings.azSelectMenu.ids).forEach(function (property) {
+        if (settings.azSelectMenu.ids.hasOwnProperty(property)) {
+          var selectFormId = settings.azSelectMenu.ids[property];
+          var selectForm = document.querySelector("#".concat(selectFormId));
+          once('azSelectMenu', selectForm, context).forEach(function (element) {
+            $(element).popover();
+            element.addEventListener('focus', function (event) {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            element.addEventListener('change', function (event) {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            element.addEventListener('mouseenter', function (event) {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            var button = element.querySelector('button');
+            button.addEventListener('click', function (event) {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            button.addEventListener('touchstart', function (event) {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            button.addEventListener('mouseenter', function (event) {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            button.addEventListener('mouseleave', function (event) {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            button.addEventListener('focus', function (event) {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            button.addEventListener('blur', function (event) {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            document.addEventListener('touchstart', function (event) {
+              Drupal.azSelectMenu.handleEvents(event);
+            });
+            element.classList.add('processed');
           });
-          element.addEventListener('change', function (event) {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          element.addEventListener('mouseenter', function (event) {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          var button = element.querySelector('button');
-          button.addEventListener('click', function (event) {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          button.addEventListener('touchstart', function (event) {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          button.addEventListener('mouseenter', function (event) {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          button.addEventListener('mouseleave', function (event) {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          button.addEventListener('focus', function (event) {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          button.addEventListener('blur', function (event) {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          document.addEventListener('touchstart', function (event) {
-            Drupal.azSelectMenu.handleEvents(event);
-          });
-          element.classList.add('processed');
-        });
-      }
+        }
+      });
     }
   };
   Drupal.azSelectMenu.handleEvents = function (event) {

modules/custom/az_select_menu/src/Plugin/Block/AzSelectMenu.php

@@ -2,6 +2,7 @@
 
 namespace Drupal\az_select_menu\Plugin\Block;
 
+use Drupal\Component\Utility\Html;
 use Drupal\Core\Block\Attribute\Block;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\StringTranslation\TranslatableMarkup;
@@ -129,9 +130,10 @@ public function blockSubmit($form, FormStateInterface $form_state) {
   public function build() {
 
     $build = parent::build();
+    $menu_name = Html::getUniqueId('az-' . $build['#menu_name']);
 
     $form_attributes = new Attribute([
-      'id' => 'az-select-menu-' . $build['#menu_name'] . '-form',
+      'id' => $menu_name . '-form',
       'data-toggle' => 'popover',
       'data-trigger' => 'focus',
       'data-placement' => 'top',
@@ -141,7 +143,7 @@ public function build() {
     $build['#form_attributes'] = $form_attributes;
 
     $select_attributes = new Attribute([
-      'id' => 'az-select-menu-' . $build['#menu_name'] . '-select',
+      'id' => $menu_name . '-select',
       'class' => [
         'form-control',
         'select-primary',
@@ -152,7 +154,7 @@ public function build() {
     $build['#select_attributes'] = $select_attributes;
 
     $button_attributes = new Attribute([
-      'id' => 'az-select-menu-' . $build['#menu_name'] . '-button',
+      'id' => $menu_name . '-button',
       'class' => [
         'btn',
         'btn-primary',
@@ -168,7 +170,7 @@ public function build() {
     $build['#button_attributes'] = $button_attributes;
 
     $build['#attached']['library'][] = 'az_select_menu/az_select_menu';
-    $build['#attached']['drupalSettings']['azSelectMenu']['ids'][] = 'az-select-menu-' . $build['#menu_name'] . '-form';
+    $build['#attached']['drupalSettings']['azSelectMenu']['ids'][$menu_name] = $menu_name . '-form';
 
     return $build;
   }

modules/custom/az_select_menu/templates/az-select-menu.html.twig

@@ -54,7 +54,7 @@
               <div class="select-menu-label">{{menu_block_configuration.az_select_menu.preform_text}}</div>
             </span>
           {% endif %}
-          <label class="sr-only select-menu-label-sr">{{menu_block_configuration.az_select_menu.preform_text_sr_only}}</label>
+          <label class="sr-only select-menu-label-sr" for="{{ select_attributes.id }}">{{menu_block_configuration.az_select_menu.preform_text_sr_only}}</label>
           {% import _self as menus %}
           {% if items %}
             <select {{ select_attributes }}>