Issue #3166068 by lauriii, Vidushi Mehta, sd9121, anu.a_95, tanubansal,...

Issue #3166068 by lauriii, Vidushi Mehta, sd9121, anu.a_95, tanubansal, bnjmnm, Lendude, katherined: Autocomplete "loading" message not properly hidden in inline forms

core/modules/system/css/components/container-inline.module.css

@@ -11,3 +11,6 @@
 .container-inline .details-wrapper {
   display: block;
 }
+.container-inline .hidden {
+  display: none;
+}

core/modules/system/tests/modules/form_test/src/FormTestAutocompleteForm.php

@@ -34,6 +34,19 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       '#autocomplete_route_name' => 'form_test.autocomplete_2',
       '#autocomplete_route_parameters' => ['param' => 'value'],
     ];
+    $form['autocomplete_3'] = [
+      '#type' => 'container',
+      '#attributes' => [
+        'class' => [
+          'container-inline',
+        ],
+      ],
+      'autocomplete_3' => [
+        '#type' => 'textfield',
+        '#title' => 'Autocomplete 3',
+        '#autocomplete_route_name' => 'form_test.autocomplete_1',
+      ],
+    ];
 
     return $form;
   }

core/tests/Drupal/Nightwatch/Tests/claroAutocompleteTest.js

+module.exports = {
+  '@tags': ['core'],
+
+  before(browser) {
+    browser.drupalInstall().drupalLoginAsAdmin(() => {
+      browser
+        .drupalRelativeURL('/admin/modules')
+        .setValue('input[type="search"]', 'FormAPI Test')
+        .waitForElementVisible('input[name="modules[form_test][enable]"]', 1000)
+        .click('input[name="modules[form_test][enable]"]')
+        .submitForm('input[type="submit"]') // Submit module form.
+        .waitForElementVisible(
+          '.system-modules-confirm-form input[value="Continue"]',
+          2000,
+        )
+        .submitForm('input[value="Continue"]') // Confirm installation of dependencies.
+        .waitForElementVisible('.system-modules', 10000);
+
+      browser
+        .drupalRelativeURL('/admin/appearance')
+        .click('[title="Install Claro as default theme"]')
+        .waitForElementVisible(
+          '.system-themes-experimental-confirm-form input[value="Continue"]',
+          2000,
+        )
+        .submitForm('input[value="Continue"]')
+        .waitForElementVisible('.system-themes-list', 10000); // Confirm installation.
+    });
+  },
+  after(browser) {
+    browser.drupalUninstall();
+  },
+
+  'Test Claro autocomplete': browser => {
+    browser
+      .drupalCreateUser({
+        name: 'user',
+        password: '123',
+        permissions: ['access autocomplete test'],
+      })
+      .drupalLogin({ name: 'user', password: '123' })
+      .drupalRelativeURL('/form-test/autocomplete')
+      .waitForElementVisible('body', 1000);
+    // eslint-disable-next-line no-unused-expressions
+    browser.expect.element(
+      '.js-form-item-autocomplete-3 [data-drupal-selector="autocomplete-message"]',
+    ).to.not.visible;
+    browser
+      .setValue('[name="autocomplete_3"]', '123')
+      .waitForElementVisible(
+        '.js-form-item-autocomplete-3 [data-drupal-selector="autocomplete-message"]',
+      )
+      .drupalLogAndEnd({ onlyOnError: false });
+  },
+};

core/themes/claro/css/components/autocomplete-loading.module.css

@@ -98,7 +98,3 @@ _:-ms-fullscreen,
   right: auto;
   left: 0;
 }
-
-.js .is-autocompleting + .claro-autocomplete__message {
-  display: block;
-}

core/themes/claro/css/components/autocomplete-loading.module.pcss.css

@@ -81,6 +81,3 @@ _:-ms-fullscreen,
   right: auto;
   left: 0;
 }
-.js .is-autocompleting + .claro-autocomplete__message {
-  display: block;
-}

core/themes/claro/js/autocomplete.es6.js

@@ -15,11 +15,17 @@
           let classRemoveTimeout;
           const classRemove = $autoCompleteElem => {
             $autoCompleteElem.removeClass('is-autocompleting');
+            $autoCompleteElem
+              .siblings('[data-drupal-selector="autocomplete-message"]')
+              .addClass('hidden');
           };
 
           $input.on('input autocompletesearch autocompleteresponses', event => {
             if (event && event.type && event.type === 'autocompletesearch') {
               $(event.target).addClass('is-autocompleting');
+              $(event.target)
+                .siblings('[data-drupal-selector="autocomplete-message"]')
+                .removeClass('hidden');
             }
             clearTimeout(classRemoveTimeout);
             classRemoveTimeout = setTimeout(

core/themes/claro/js/autocomplete.js

@@ -15,11 +15,13 @@
 
         var classRemove = function classRemove($autoCompleteElem) {
           $autoCompleteElem.removeClass('is-autocompleting');
+          $autoCompleteElem.siblings('[data-drupal-selector="autocomplete-message"]').addClass('hidden');
         };
 
         $input.on('input autocompletesearch autocompleteresponses', function (event) {
           if (event && event.type && event.type === 'autocompletesearch') {
             $(event.target).addClass('is-autocompleting');
+            $(event.target).siblings('[data-drupal-selector="autocomplete-message"]').removeClass('hidden');
           }
 
           clearTimeout(classRemoveTimeout);

core/themes/claro/templates/form/input.html.twig

@@ -15,7 +15,7 @@
 {% if autocomplete_message %}
   <div class="claro-autocomplete">
     <input{{ attributes }}/>
-    <div hidden class="claro-autocomplete__message">{{autocomplete_message}}</div>
+    <div class="claro-autocomplete__message hidden" data-drupal-selector="autocomplete-message">{{ autocomplete_message }}</div>
   </div>
   {{ children }}
 {% else %}