deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-02 05:52:46 +02:00
Code Issues Projects Releases Wiki Activity

Disable element if disabled attr passed

Browse source
This commit is contained in:
Josh Johnson 2018-10-30 20:21:52 +00:00
parent 139a756ef9
commit 798b49d565
8 changed files with 142 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
cypress/integration/select-multiple.spec.js
View file

@ -321,6 +321,49 @@ describe('Choices - select multiple', () => {
});
});
describe('disabled via attribute', () => {
beforeEach(() => {
cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices')
.click();
});
it('disables the search input', () => {
cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices__input--cloned')
.should('be.disabled');
});
describe('on click', () => {
it('opens choice dropdown', () => {
cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices__list--dropdown')
.should('be.visible');
});
});
describe('attempting to select choice', () => {
let selectedChoice;
it('does not select choice', () => {
cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices__list--dropdown .choices__item')
.last()
.then($lastChoice => {
selectedChoice = $lastChoice;
})
.click();
cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices__list--multiple .choices__item')
.last()
.should($item => {
expect($item.text()).to.not.contain(selectedChoice.text());
});
});
});
});
describe('selection limit', () => {
/*
{

43
cypress/integration/select-one.spec.js
View file

@ -269,6 +269,49 @@ describe('Choices - select one', () => {
});
});
describe('disabled via attribute', () => {
beforeEach(() => {
cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices')
.click();
});
it('disables the search input', () => {
cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices__input--cloned')
.should('be.disabled');
});
describe('on click', () => {
it('opens choice dropdown', () => {
cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices__list--dropdown')
.should('be.visible');
});
});
describe('attempting to select choice', () => {
let selectedChoice;
it('does not select choice', () => {
cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices__list--dropdown .choices__item')
.last()
.then($lastChoice => {
selectedChoice = $lastChoice;
})
.click();
cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices__list--single .choices__item')
.last()
.should($item => {
expect($item.text()).to.not.contain(selectedChoice.text());
});
});
});
});
describe('prepend/append', () => {
/*
{

12
cypress/integration/text.spec.js
View file

@ -284,9 +284,17 @@ describe('Choices - text element', () => {
});
});
describe('disabled', () => {
describe('adding items disabled', () => {
it('does not allow me to input data', () => {
cy.get('[data-test-hook=disabled]')
cy.get('[data-test-hook=adding-items-disabled]')
.find('.choices__input--cloned')
.should('be.disabled');
});
});
describe('disabled via attribute', () => {
it('does not allow me to input data', () => {
cy.get('[data-test-hook=disabled-via-attr]')
.find('.choices__input--cloned')
.should('be.disabled');
});

11
public/test/select-multiple.html
View file

@ -68,6 +68,15 @@
</select>
</div>
<div data-test-hook="disabled-via-attr">
<label for="choices-disabled-via-attr">Disabled via attribute</label>
<select class="form-control" name="choices-disabled-via-attr" id="choices-disabled-via-attr" multiple disabled>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div data-test-hook="selection-limit">
<label for="choices-selection-limit">Input limit</label>
<select class="form-control" name="choices-selection-limit" id="choices-selection-limit" multiple>
@ -173,6 +182,8 @@
addItems: false,
});
new Choices('#choices-disabled-via-attr');
new Choices('#choices-selection-limit', {
maxItemCount: 5,
});

11
public/test/select-one.html
View file

@ -68,6 +68,15 @@
</select>
</div>
<div data-test-hook="disabled-via-attr">
<label for="choices-disabled-via-attr">Disabled via attribute</label>
<select class="form-control" name="choices-disabled-via-attr" id="choices-disabled-via-attr" disabled>
<option value="Choice 1" selected>Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div data-test-hook="prepend-append">
<label for="choices-prepend-append">Prepend/append</label>
<select class="form-control" name="choices-prepend-append" id="choices-prepend-append">
@ -179,6 +188,8 @@
addItems: false,
});
new Choices('#choices-disabled-via-attr');
new Choices('#choices-prepend-append', {
prependValue: 'before-',
appendValue: '-after',

18
public/test/text.html
View file

@ -59,9 +59,14 @@
<input class="form-control" id="choices-regex-filter" type="text">
</div>
<div data-test-hook="disabled">
<label for="choices-disabled">Disabled</label>
<input class="form-control" id="choices-disabled" type="text">
<div data-test-hook="adding-items-disabled">
<label for="choices-adding-items-disabled">Add items disabled</label>
<input class="form-control" id="choices-adding-items-disabled" type="text">
</div>
<div data-test-hook="disabled-via-attr">
<label for="choices-disabled-via-attr">Disabled via attribute</label>
<input class="form-control" id="choices-disabled-via-attr" type="text" disabled>
</div>
<div data-test-hook="prepend-append">
@ -104,10 +109,11 @@
regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
});
new Choices('#choices-disabled', {
new Choices('#choices-adding-items-disabled', {
addItems: false,
removeItems: false,
}).disable();
});
new Choices('#choices-disabled-via-attr');
new Choices('#choices-prepend-append', {
prependValue: 'before-',

5
src/scripts/choices.js
View file

@ -1830,7 +1830,10 @@ class Choices {
this.input.setWidth(true);
}
if (!this.config.addItems) {
if (
!this.config.addItems ||
this.passedElement.element.hasAttribute('disabled')
) {
this.disable();
}

16
src/scripts/components/wrapped-element.test.js
View file

@ -10,7 +10,7 @@ describe('components/wrappedElement', () => {
element = document.createElement('select');
instance = new WrappedElement({
element,
classNames: DEFAULT_CLASSNAMES
classNames: DEFAULT_CLASSNAMES,
});
});
@ -51,15 +51,15 @@ describe('components/wrappedElement', () => {
instance.conceal();
expect(instance.element.tabIndex).to.equal(-1);
expect(
instance.element.classList.contains(instance.classNames.input)
instance.element.classList.contains(instance.classNames.input),
).to.equal(true);
expect(
instance.element.classList.contains(instance.classNames.hiddenState)
instance.element.classList.contains(instance.classNames.hiddenState),
).to.equal(true);
expect(instance.element.getAttribute('aria-hidden')).to.equal('true');
expect(instance.element.getAttribute('data-choice')).to.equal('active');
expect(instance.element.getAttribute('data-choice-orig-style')).to.equal(
originalStyling
originalStyling,
);
});
});
@ -76,16 +76,16 @@ describe('components/wrappedElement', () => {
instance.reveal();
expect(instance.element.tabIndex).to.equal(0);
expect(
instance.element.classList.contains(instance.classNames.input)
instance.element.classList.contains(instance.classNames.input),
).to.equal(false);
expect(
instance.element.classList.contains(instance.classNames.hiddenState)
instance.element.classList.contains(instance.classNames.hiddenState),
).to.equal(false);
expect(instance.element.getAttribute('style')).to.equal(originalStyling);
expect(instance.element.getAttribute('aria-hidden')).to.equal(null);
expect(instance.element.getAttribute('data-choice')).to.equal(null);
expect(instance.element.getAttribute('data-choice-orig-style')).to.equal(
null
null,
);
});
});
@ -141,7 +141,7 @@ describe('components/wrappedElement', () => {
describe('triggerEvent', () => {
it('fires event on element using passed eventType and data', done => {
const data = {
test: true
test: true,
};
instance.element.addEventListener('testEvent', ({ detail }) => {