Commit 202d7681 authored by Gábor Hojtsy's avatar Gábor Hojtsy

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
parent ad3f34c1
......@@ -11,3 +11,6 @@
.container-inline .details-wrapper {
display: block;
}
.container-inline .hidden {
display: none;
}
......@@ -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;
}
......
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 });
},
};
......@@ -98,7 +98,3 @@ _:-ms-fullscreen,
right: auto;
left: 0;
}
.js .is-autocompleting + .claro-autocomplete__message {
display: block;
}
......@@ -81,6 +81,3 @@ _:-ms-fullscreen,
right: auto;
left: 0;
}
.js .is-autocompleting + .claro-autocomplete__message {
display: block;
}
......@@ -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(
......
......@@ -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);
......
......@@ -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 %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment