mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 21:16:34 +02:00
fix unique dropdown for multi-select select boxes
This commit is contained in:
parent
36a5a0bd67
commit
561a61de0f
|
@ -282,6 +282,41 @@ describe('Choices - select multiple', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('unique values only', () => {
|
||||||
|
describe('unique values', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
cy.get('[data-test-hook=unique-values]')
|
||||||
|
.find('.choices__input--cloned')
|
||||||
|
.type('Choice 1')
|
||||||
|
.type('{enter}');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('only allows me to input unique values', () => {
|
||||||
|
cy.get('[data-test-hook=unique-values]')
|
||||||
|
.find('.choices__list--multiple')
|
||||||
|
.first()
|
||||||
|
.children()
|
||||||
|
.should($items => {
|
||||||
|
expect($items.length).to.equal(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('inputting a non-unique value', () => {
|
||||||
|
it('displays dropdown prompt', () => {
|
||||||
|
cy.get('[data-test-hook=unique-values]')
|
||||||
|
.find('.choices__list--dropdown')
|
||||||
|
.should('be.visible')
|
||||||
|
.should($dropdown => {
|
||||||
|
const dropdownText = $dropdown.text().trim();
|
||||||
|
expect(dropdownText).to.equal(
|
||||||
|
'Only unique values can be added',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('disabled choice', () => {
|
describe('disabled choice', () => {
|
||||||
describe('selecting a disabled choice', () => {
|
describe('selecting a disabled choice', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
|
|
@ -88,6 +88,22 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div data-test-hook="unique-values">
|
||||||
|
<label for="choices-unique-values">Unique values</label>
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
name="choices-unique-values"
|
||||||
|
id="choices-unique-values"
|
||||||
|
multiple
|
||||||
|
>
|
||||||
|
<option value="Choice 1" selected>Choice 1</option>
|
||||||
|
<option value="Choice 1">Choice 1</option>
|
||||||
|
<option value="Choice 2">Choice 2</option>
|
||||||
|
<option value="Choice 3">Choice 3</option>
|
||||||
|
<option value="Choice 4">Choice 4</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div data-test-hook="disabled-choice">
|
<div data-test-hook="disabled-choice">
|
||||||
<label for="choices-disabled-choice">Disabled choice</label>
|
<label for="choices-disabled-choice">Disabled choice</label>
|
||||||
<select
|
<select
|
||||||
|
@ -437,6 +453,9 @@
|
||||||
new Choices('#choices-disabled-choice', {
|
new Choices('#choices-disabled-choice', {
|
||||||
allowHTML: true,
|
allowHTML: true,
|
||||||
});
|
});
|
||||||
|
new Choices('#choices-unique-values', {
|
||||||
|
duplicateItemsAllowed: false,
|
||||||
|
});
|
||||||
|
|
||||||
new Choices('#choices-add-items', {
|
new Choices('#choices-add-items', {
|
||||||
addItems: true,
|
addItems: true,
|
||||||
|
|
|
@ -3,11 +3,11 @@ import merge from 'deepmerge';
|
||||||
import Fuse from 'fuse.js';
|
import Fuse from 'fuse.js';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
Result,
|
||||||
activateChoices,
|
activateChoices,
|
||||||
addChoice,
|
addChoice,
|
||||||
clearChoices,
|
clearChoices,
|
||||||
filterChoices,
|
filterChoices,
|
||||||
Result,
|
|
||||||
} from './actions/choices';
|
} from './actions/choices';
|
||||||
import { addGroup } from './actions/groups';
|
import { addGroup } from './actions/groups';
|
||||||
import { addItem, highlightItem, removeItem } from './actions/items';
|
import { addItem, highlightItem, removeItem } from './actions/items';
|
||||||
|
@ -35,7 +35,6 @@ import { Notice } from './interfaces/notice';
|
||||||
import { Options } from './interfaces/options';
|
import { Options } from './interfaces/options';
|
||||||
import { PassedElement } from './interfaces/passed-element';
|
import { PassedElement } from './interfaces/passed-element';
|
||||||
import { State } from './interfaces/state';
|
import { State } from './interfaces/state';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
diff,
|
diff,
|
||||||
existsInArray,
|
existsInArray,
|
||||||
|
@ -44,9 +43,9 @@ import {
|
||||||
getType,
|
getType,
|
||||||
isScrolledIntoView,
|
isScrolledIntoView,
|
||||||
isType,
|
isType,
|
||||||
|
parseCustomProperties,
|
||||||
sortByScore,
|
sortByScore,
|
||||||
strToEl,
|
strToEl,
|
||||||
parseCustomProperties,
|
|
||||||
} from './lib/utils';
|
} from './lib/utils';
|
||||||
import { defaultState } from './reducers';
|
import { defaultState } from './reducers';
|
||||||
import Store from './store/store';
|
import Store from './store/store';
|
||||||
|
@ -1555,13 +1554,12 @@ class Choices implements Choices {
|
||||||
const { activeItems } = this._store;
|
const { activeItems } = this._store;
|
||||||
const canAddItem = this._canAddItem(activeItems, value);
|
const canAddItem = this._canAddItem(activeItems, value);
|
||||||
const { BACK_KEY: backKey, DELETE_KEY: deleteKey } = KEY_CODES;
|
const { BACK_KEY: backKey, DELETE_KEY: deleteKey } = KEY_CODES;
|
||||||
|
const canShowDropdownNotice =
|
||||||
|
this.config.addItems && canAddItem.notice && value;
|
||||||
|
|
||||||
// We are typing into a text input and have a value, we want to show a dropdown
|
// We are typing into a text input and have a value, we want to show a dropdown
|
||||||
// notice. Otherwise hide the dropdown
|
// notice. Otherwise hide the dropdown
|
||||||
if (this._isTextElement) {
|
if (this._isTextElement) {
|
||||||
const canShowDropdownNotice =
|
|
||||||
this.config.addItems && canAddItem.notice && value;
|
|
||||||
|
|
||||||
if (canShowDropdownNotice) {
|
if (canShowDropdownNotice) {
|
||||||
const dropdownItem = this._getTemplate('notice', canAddItem.notice);
|
const dropdownItem = this._getTemplate('notice', canAddItem.notice);
|
||||||
this.dropdown.element.innerHTML = dropdownItem.outerHTML;
|
this.dropdown.element.innerHTML = dropdownItem.outerHTML;
|
||||||
|
@ -1579,7 +1577,7 @@ class Choices implements Choices {
|
||||||
if (userHasRemovedValue && canReactivateChoices) {
|
if (userHasRemovedValue && canReactivateChoices) {
|
||||||
this._isSearching = false;
|
this._isSearching = false;
|
||||||
this._store.dispatch(activateChoices(true));
|
this._store.dispatch(activateChoices(true));
|
||||||
} else if (canSearch) {
|
} else if (canSearch || canShowDropdownNotice) {
|
||||||
this._handleSearch(this.input.rawValue);
|
this._handleSearch(this.input.rawValue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue