diff --git a/core/modules/system/css/components/container-inline.module.css b/core/modules/system/css/components/container-inline.module.css
index ba99a36563eade1dfa156061c1c9f4822e8878f3..4de4237667c023a72dd4802c0db256eefa76cac7 100644
--- a/core/modules/system/css/components/container-inline.module.css
+++ b/core/modules/system/css/components/container-inline.module.css
@@ -11,3 +11,6 @@
 .container-inline .details-wrapper {
   display: block;
 }
+.container-inline .hidden {
+  display: none;
+}
diff --git a/core/modules/system/tests/modules/form_test/src/FormTestAutocompleteForm.php b/core/modules/system/tests/modules/form_test/src/FormTestAutocompleteForm.php
index bde049e10e47a768de8555b67dc02e1b9d8ebf67..2265522e661c1cfcb759cc166fc0aeaa07cb1e3e 100644
--- a/core/modules/system/tests/modules/form_test/src/FormTestAutocompleteForm.php
+++ b/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;
   }
diff --git a/core/tests/Drupal/Nightwatch/Tests/claroAutocompleteTest.js b/core/tests/Drupal/Nightwatch/Tests/claroAutocompleteTest.js
new file mode 100644
index 0000000000000000000000000000000000000000..292fe35c27c4102ae11b08c157276c989a7251a1
--- /dev/null
+++ b/core/tests/Drupal/Nightwatch/Tests/claroAutocompleteTest.js
@@ -0,0 +1,55 @@
+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 });
+  },
+};
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css
index c2bb486a5a730e64158c123ef655ec15f456a162..d022cc8dc8cc587bfe69b670a500553c526d55ec 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/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;
-}
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
index fc81d5ce43961c067cc2565c2021e8f575897e3c..ecb281aa9a9220f57ab7a85cf63329023f51e72a 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
+++ b/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;
-}
diff --git a/core/themes/claro/js/autocomplete.es6.js b/core/themes/claro/js/autocomplete.es6.js
index 4c239a7e14f88ad58413eb7c0c34eca1453303e6..57a471b370d5956e68522ceb310e7385f0eb64fa 100644
--- a/core/themes/claro/js/autocomplete.es6.js
+++ b/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(
diff --git a/core/themes/claro/js/autocomplete.js b/core/themes/claro/js/autocomplete.js
index a1d042f36d2affa0f76b5fda928397c937ad27c5..d86cc3004632a2e10beebdedbd1971890d6f2df8 100644
--- a/core/themes/claro/js/autocomplete.js
+++ b/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);
diff --git a/core/themes/claro/templates/form/input.html.twig b/core/themes/claro/templates/form/input.html.twig
index 12697039f4e45f5340d95fb11a9728eb406785a0..7d618664bd90076da1c5137d5e97e94c59a587a1 100644
--- a/core/themes/claro/templates/form/input.html.twig
+++ b/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 %}