Disable input when loading remote data

This commit is contained in:
Josh Johnson 2018-11-03 13:24:52 +00:00
parent 307881a068
commit 496db95153
3 changed files with 14 additions and 16 deletions

View file

@ -520,16 +520,13 @@ describe('Choices - select multiple', () => {
.should('have.attr', 'placeholder', 'Loading...'); .should('have.attr', 'placeholder', 'Loading...');
}); });
describe('opening the dropdown', () => { describe('on click', () => {
it('displays "no choices to choose" prompt', () => { it('does not opens choice dropdown', () => {
cy.get('[data-test-hook=remote-data]').click();
cy.get('[data-test-hook=remote-data]') cy.get('[data-test-hook=remote-data]')
.find('.choices')
.click()
.find('.choices__list--dropdown') .find('.choices__list--dropdown')
.should('be.visible') .should('not.have.class', 'is-active');
.should($dropdown => {
const dropdownText = $dropdown.text().trim();
expect(dropdownText).to.equal('No choices to choose from');
});
}); });
}); });
}); });

View file

@ -471,16 +471,13 @@ describe('Choices - select one', () => {
}); });
}); });
describe('opening the dropdown', () => { describe('on click', () => {
it('displays "no choices to choose" prompt', () => { it('does not opens choice dropdown', () => {
cy.get('[data-test-hook=remote-data]').click();
cy.get('[data-test-hook=remote-data]') cy.get('[data-test-hook=remote-data]')
.find('.choices')
.click()
.find('.choices__list--dropdown') .find('.choices__list--dropdown')
.should('be.visible') .should('not.have.class', 'is-active');
.should($dropdown => {
const dropdownText = $dropdown.text().trim();
expect(dropdownText).to.equal('No choices to choose from');
});
}); });
}); });
}); });

View file

@ -874,8 +874,11 @@ class Choices {
let placeholderItem = this.itemList.getChild( let placeholderItem = this.itemList.getChild(
`.${this.config.classNames.placeholder}`, `.${this.config.classNames.placeholder}`,
); );
if (isLoading) { if (isLoading) {
this.disable();
this.containerOuter.addLoadingState(); this.containerOuter.addLoadingState();
if (this._isSelectOneElement) { if (this._isSelectOneElement) {
if (!placeholderItem) { if (!placeholderItem) {
placeholderItem = this._getTemplate( placeholderItem = this._getTemplate(
@ -890,6 +893,7 @@ class Choices {
this.input.placeholder = this.config.loadingText; this.input.placeholder = this.config.loadingText;
} }
} else { } else {
this.enable();
this.containerOuter.removeLoadingState(); this.containerOuter.removeLoadingState();
if (this._isSelectOneElement) { if (this._isSelectOneElement) {