mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 08:52:19 +02:00
Use internal flag for enabling/disabling search
This commit is contained in:
parent
5a6c8142b9
commit
32f32703cb
|
@ -74,10 +74,10 @@
|
||||||
<input class="form-control" id="choices-text-preset-values" type="text" value="Michael Smith" placeholder="This is a placeholder">
|
<input class="form-control" id="choices-text-preset-values" type="text" value="Michael Smith" placeholder="This is a placeholder">
|
||||||
|
|
||||||
<label for="choices-text-i18n">I18N labels</label>
|
<label for="choices-text-i18n">I18N labels</label>
|
||||||
<input class="form-control" data-trigger id="choices-text-i18n" type="text">
|
<input class="form-control" id="choices-text-i18n" type="text">
|
||||||
|
|
||||||
<label for="choices-text-rtl">Right-to-left</label>
|
<label for="choices-text-rtl">Right-to-left</label>
|
||||||
<input class="form-control" data-trigger id="choices-text-rtl" type="text" value="Value 1, Value 2" dir="rtl">
|
<input class="form-control" id="choices-text-rtl" type="text" value="Value 1, Value 2" dir="rtl">
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
|
@ -293,7 +293,7 @@
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="reset-multiple">And me!</label>
|
<label for="reset-multiple">And me!</label>
|
||||||
<select class="form-control" data-trigger name="reset-multiple" id="reset-multiple" placeholder="This is a placeholder"
|
<select class="form-control" name="reset-multiple" id="reset-multiple" placeholder="This is a placeholder"
|
||||||
multiple>
|
multiple>
|
||||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||||
|
|
|
@ -104,12 +104,14 @@ class Choices {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
this._store = new Store(this.render);
|
|
||||||
this.initialised = false;
|
this.initialised = false;
|
||||||
|
|
||||||
|
this._store = new Store(this.render);
|
||||||
this._initialState = {};
|
this._initialState = {};
|
||||||
this._currentState = {};
|
this._currentState = {};
|
||||||
this._prevState = {};
|
this._prevState = {};
|
||||||
this._currentValue = '';
|
this._currentValue = '';
|
||||||
|
this._canSearch = this.config.searchEnabled;
|
||||||
this._isScrollingOnIe = false;
|
this._isScrollingOnIe = false;
|
||||||
this._highlightPosition = 0;
|
this._highlightPosition = 0;
|
||||||
this._wasTap = true;
|
this._wasTap = true;
|
||||||
|
@ -142,7 +144,9 @@ class Choices {
|
||||||
|
|
||||||
// If element has already been initialised with Choices, fail silently
|
// If element has already been initialised with Choices, fail silently
|
||||||
if (this.passedElement.element.getAttribute('data-choice') === 'active') {
|
if (this.passedElement.element.getAttribute('data-choice') === 'active') {
|
||||||
return false;
|
console.warn(
|
||||||
|
'Trying to initialise Choices on element already initialised',
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Let's go
|
// Let's go
|
||||||
|
@ -158,23 +162,16 @@ class Choices {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set initialise flag
|
|
||||||
this.initialised = true;
|
|
||||||
// Create required templates
|
|
||||||
this._createTemplates();
|
this._createTemplates();
|
||||||
// Create required elements
|
|
||||||
this._createElements();
|
this._createElements();
|
||||||
// Generate input markup
|
|
||||||
this._createStructure();
|
this._createStructure();
|
||||||
// Set initial state (We need to clone the state because some reducers
|
// Set initial state (We need to clone the state because some reducers
|
||||||
// modify the inner objects properties in the state) 🤢
|
// modify the inner objects properties in the state) 🤢
|
||||||
this._initialState = cloneObject(this._store.state);
|
this._initialState = cloneObject(this._store.state);
|
||||||
// Subscribe store to render method
|
|
||||||
this._store.subscribe(this.render);
|
this._store.subscribe(this.render);
|
||||||
// Render any items
|
|
||||||
this.render();
|
this.render();
|
||||||
// Trigger event listeners
|
|
||||||
this._addEventListeners();
|
this._addEventListeners();
|
||||||
|
this.initialised = true;
|
||||||
|
|
||||||
const { callbackOnInit } = this.config;
|
const { callbackOnInit } = this.config;
|
||||||
// Run callback if it is a function
|
// Run callback if it is a function
|
||||||
|
@ -349,7 +346,7 @@ class Choices {
|
||||||
this.dropdown.show();
|
this.dropdown.show();
|
||||||
this.containerOuter.open(this.dropdown.distanceFromTopWindow());
|
this.containerOuter.open(this.dropdown.distanceFromTopWindow());
|
||||||
|
|
||||||
if (!preventInputFocus && this.config.searchEnabled) {
|
if (!preventInputFocus && this._canSearch) {
|
||||||
this.input.focus();
|
this.input.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -368,7 +365,7 @@ class Choices {
|
||||||
this.dropdown.hide();
|
this.dropdown.hide();
|
||||||
this.containerOuter.close();
|
this.containerOuter.close();
|
||||||
|
|
||||||
if (!preventInputBlur && this.config.searchEnabled) {
|
if (!preventInputBlur && this._canSearch) {
|
||||||
this.input.removeActiveDescendant();
|
this.input.removeActiveDescendant();
|
||||||
this.input.blur();
|
this.input.blur();
|
||||||
}
|
}
|
||||||
|
@ -380,12 +377,7 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleDropdown() {
|
toggleDropdown() {
|
||||||
if (this.dropdown.isActive) {
|
this.dropdown.isActive ? this.hideDropdown() : this.showDropdown();
|
||||||
this.hideDropdown();
|
|
||||||
} else {
|
|
||||||
this.showDropdown();
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -463,7 +455,7 @@ class Choices {
|
||||||
const shouldSetInputWidth = !this._isSelectOneElement;
|
const shouldSetInputWidth = !this._isSelectOneElement;
|
||||||
this.input.clear(shouldSetInputWidth);
|
this.input.clear(shouldSetInputWidth);
|
||||||
|
|
||||||
if (!this._isTextElement && this.config.searchEnabled) {
|
if (!this._isTextElement && this._canSearch) {
|
||||||
this._isSearching = false;
|
this._isSearching = false;
|
||||||
this._store.dispatch(activateChoices(true));
|
this._store.dispatch(activateChoices(true));
|
||||||
}
|
}
|
||||||
|
@ -1023,7 +1015,7 @@ class Choices {
|
||||||
const onAKey = () => {
|
const onAKey = () => {
|
||||||
// If CTRL + A or CMD + A have been pressed and there are items to select
|
// If CTRL + A or CMD + A have been pressed and there are items to select
|
||||||
if (ctrlDownKey && hasItems) {
|
if (ctrlDownKey && hasItems) {
|
||||||
this.config.searchEnabled = false;
|
this._canSearch = false;
|
||||||
if (
|
if (
|
||||||
this.config.removeItems &&
|
this.config.removeItems &&
|
||||||
!this.input.value &&
|
!this.input.value &&
|
||||||
|
@ -1086,10 +1078,8 @@ class Choices {
|
||||||
const onDirectionKey = () => {
|
const onDirectionKey = () => {
|
||||||
// If up or down key is pressed, traverse through options
|
// If up or down key is pressed, traverse through options
|
||||||
if (hasActiveDropdown || this._isSelectOneElement) {
|
if (hasActiveDropdown || this._isSelectOneElement) {
|
||||||
// Show dropdown if focus
|
|
||||||
this.showDropdown();
|
this.showDropdown();
|
||||||
|
this._canSearch = false;
|
||||||
this.config.searchEnabled = false;
|
|
||||||
|
|
||||||
const directionInt =
|
const directionInt =
|
||||||
keyCode === downKey || keyCode === pageDownKey ? 1 : -1;
|
keyCode === downKey || keyCode === pageDownKey ? 1 : -1;
|
||||||
|
@ -1207,12 +1197,12 @@ class Choices {
|
||||||
this._isSearching = false;
|
this._isSearching = false;
|
||||||
this._store.dispatch(activateChoices(true));
|
this._store.dispatch(activateChoices(true));
|
||||||
}
|
}
|
||||||
} else if (this.config.searchEnabled && canAddItem.response) {
|
} else if (this._canSearch && canAddItem.response) {
|
||||||
this._handleSearch(this.input.value);
|
this._handleSearch(this.input.value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Re-establish canSearch value from changes in _onKeyDown
|
|
||||||
this.config.searchEnabled = this.config.searchEnabled;
|
this._canSearch = this.config.searchEnabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
_onTouchMove() {
|
_onTouchMove() {
|
||||||
|
@ -1373,8 +1363,7 @@ class Choices {
|
||||||
this.containerOuter.removeFocusState();
|
this.containerOuter.removeFocusState();
|
||||||
if (
|
if (
|
||||||
target === this.input.element ||
|
target === this.input.element ||
|
||||||
(target === this.containerOuter.element &&
|
(target === this.containerOuter.element && !this._canSearch)
|
||||||
!this.config.searchEnabled)
|
|
||||||
) {
|
) {
|
||||||
this.hideDropdown(true);
|
this.hideDropdown(true);
|
||||||
}
|
}
|
||||||
|
@ -1780,9 +1769,7 @@ class Choices {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
passedGroups.forEach(group => {
|
passedGroups.forEach(group => this._addGroup(group, group.id || null));
|
||||||
this._addGroup(group, group.id || null);
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
const passedOptions = this.passedElement.options;
|
const passedOptions = this.passedElement.options;
|
||||||
const filter = this.config.sortFn;
|
const filter = this.config.sortFn;
|
||||||
|
|
Loading…
Reference in a new issue