Reworked behavior for supporting browsers.

Closes #3470922

assets/js/datalist.js

@@ -2,107 +2,88 @@
  * @file
  * Datalist clear button handling.
  */
-(function () {
+(function (Drupal, once) {
   'use strict';
 
-  Drupal.datalist = Drupal.datalist || {};
-
-  Drupal.datalist.once = false;
-
   /**
    * Drupal behavior.
    */
   Drupal.behaviors.datalist = {
     attach: function (context) {
-      let datalistsClear = document.querySelectorAll('.form-type--datalist .clear');
-      let datalistsInput = document.querySelectorAll('.form-type--datalist input');
-      let datalists = document.querySelectorAll('.form-type--datalist');
 
-      if (datalistsClear.length === 0) {
+      let datalistsFormElements = once('datalist', '.form-type--datalist', context);
+
+      if (datalistsFormElements.length === 0) {
         return;
       }
 
       // Handle unsupported browsers via JS.
       const isBrowserSupported = Drupal.behaviors.datalist.browserSupported();
-      if (!Drupal.datalist.once) {
-        Drupal.datalist.once = true;
-
-        datalists.forEach(element => {
-          const datalistInput = element.querySelector('input');
-          const datalistList = element.querySelector('datalist');
-
-          if (isBrowserSupported) {
-            Drupal.behaviors.datalist.removeAutocomplete(datalistInput);
-
-            datalists = document.querySelectorAll('.form-type--datalist');
-            datalistsClear = document.querySelectorAll('.form-type--datalist .clear');
-            datalistsInput = document.querySelectorAll('.form-type--datalist input');
-          } else {
-            Drupal.behaviors.datalist.removeDataList(datalistInput, datalistList);
-          }
-        });
-      }
 
-      datalistsInput.forEach(dataListInput => {
-        Drupal.behaviors.datalist.toggleClearIfNotEmpty(dataListInput);
+      datalistsFormElements.forEach(element => {
+
+        let input = element.querySelector('input');
+        let clear = element.querySelector('.clear');
+        let datalist = element.querySelector('datalist');
+
+        // Update the initial state of the clear button.
+        Drupal.behaviors.datalist.updateInputClearButton(input);
 
         // Chrome fills in input later on when going back.
-        dataListInput.addEventListener('focus', function (e) {
-          const dataListInput = e.target;
-          Drupal.behaviors.datalist.toggleClearIfNotEmpty(dataListInput);
+        input.addEventListener('focus', function (e) {
+          Drupal.behaviors.datalist.updateInputClearButton(e.target);
         });
 
-        dataListInput.addEventListener('input', function (e) {
-          const value = e.target.value;
-          let clear_button = e.currentTarget.parentElement.querySelector('.clear');
-
-          if (!value || value === '') {
-            clear_button.classList.add('not-visible');
-            clear_button.setAttribute('tabIndex', '-1');
-          } else {
-            if (!clear_button.classList.contains('visible')) {
-              clear_button.classList.add('visible');
-              clear_button.classList.remove('not-visible');
-              clear_button.setAttribute('tabIndex', '0');
-            }
-          }
+        input.addEventListener('input', function (e) {
+          Drupal.behaviors.datalist.updateInputClearButton(e.target);
         });
-      });
 
-      datalistsClear.forEach(datalistClear => {
-        datalistClear.addEventListener('click', function (e) {
+        clear.addEventListener('click', function (e) {
           e.preventDefault();
+          Drupal.behaviors.datalist.clearInput(e. currentTarget);
+        });
 
-          e.currentTarget.classList.remove('visible');
-          e.currentTarget.classList.add('not-visible');
-
-          let input = e.currentTarget.parentElement.querySelector('input');
-          input.value = '';
-          input.dispatchEvent(new Event('input', { bubbles: true }));
-          input.dispatchEvent(new Event('change', { bubbles: true }));
+        if (isBrowserSupported) {
+          Drupal.behaviors.datalist.removeAutocomplete(input);
+        } else {
+          Drupal.behaviors.datalist.removeDataList(input, datalist);
+        }
 
-          input.focus();
-        });
       });
+
     },
-    toggleClearIfNotEmpty: function (dataListInput) {
-      if (dataListInput.value !== '') {
-        let clear_button = dataListInput.parentElement.querySelector('.clear');
-        clear_button.classList.add('visible');
-        clear_button.classList.remove('not-visible');
+    updateInputClearButton: function (input) {
+      let clear = input.parentElement.querySelector('.clear');
+
+      if (!input.value || input.value === '') {
+        clear.classList.add('not-visible');
+        clear.setAttribute('tabIndex', '-1');
+      } else {
+        if (!clear.classList.contains('visible')) {
+          clear.classList.add('visible');
+          clear.classList.remove('not-visible');
+          clear.setAttribute('tabIndex', '0');
+        }
       }
+
     },
-    removeDataList: function (datalistInput, dataListList) {
-      datalistInput.removeAttribute('list');
-      dataListList.outerHTML = '';
-      datalistInput.parentElement.querySelector('.datalist__down-button').outerHTML = '';
-    },
-    removeAutocomplete: function (datalistInput) {
-      datalistInput.classList.remove('form-autocomplete');
-      datalistInput.classList.remove('ui-autocomplete-input');
-      datalistInput.removeAttribute('data-autocomplete-path');
+    clearInput: function (clear) {
+      let input = clear.parentElement.querySelector('input');
 
-      datalistInput.replaceWith(datalistInput.cloneNode(true));
+      input.value = '';
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+      input.focus();
+    },
+    removeDataList: function (input, datalist) {
+      input.removeAttribute('list');
+      datalist.outerHTML = '';
+      input.parentElement.querySelector('.datalist__down-button').outerHTML = '';
+    },
+    removeAutocomplete: function (input) {
+      input.classList.remove('form-autocomplete');
+      input.classList.remove('ui-autocomplete-input');
+      input.removeAttribute('data-autocomplete-path');
     },
     browserSupported: function () {
       const userAgent = window.navigator.userAgent;
@@ -127,4 +108,4 @@
     },
   };
 
-})();
+})(Drupal, once);