mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-15 20:25:18 +02:00
Merge pull request #123 from samueldjack/dropdown-events
Dropdown events
This commit is contained in:
commit
4aa2a047bd
10
README.md
10
README.md
|
@ -523,6 +523,16 @@ example.passedElement.addEventListener('addItem', function(event) {
|
||||||
|
|
||||||
**Usage:** Triggered when a user types into an input to search choices.
|
**Usage:** Triggered when a user types into an input to search choices.
|
||||||
|
|
||||||
|
### showDropdown
|
||||||
|
**Arguments:** - **Input types affected:** `select-one`, `select-multiple`
|
||||||
|
|
||||||
|
**Usage:** Triggered when the dropdown is shown.
|
||||||
|
|
||||||
|
### hideDropdown
|
||||||
|
**Arguments:** - **Input types affected:** `select-one`, `select-multiple`
|
||||||
|
|
||||||
|
**Usage:** Triggered when the dropdown is hidden.
|
||||||
|
|
||||||
## Methods
|
## Methods
|
||||||
Methods can be called either directly or by chaining:
|
Methods can be called either directly or by chaining:
|
||||||
|
|
||||||
|
|
12
assets/scripts/dist/choices.js
vendored
12
assets/scripts/dist/choices.js
vendored
|
@ -566,12 +566,14 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||||
(0, _utils.triggerEvent)(this.passedElement, 'highlightItem', {
|
(0, _utils.triggerEvent)(this.passedElement, 'highlightItem', {
|
||||||
id: id,
|
id: id,
|
||||||
value: item.value,
|
value: item.value,
|
||||||
|
label: item.label,
|
||||||
groupValue: group.value
|
groupValue: group.value
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
(0, _utils.triggerEvent)(this.passedElement, 'highlightItem', {
|
(0, _utils.triggerEvent)(this.passedElement, 'highlightItem', {
|
||||||
id: id,
|
id: id,
|
||||||
value: item.value
|
value: item.value,
|
||||||
|
label: item.label
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -600,12 +602,14 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||||
(0, _utils.triggerEvent)(this.passedElement, 'unhighlightItem', {
|
(0, _utils.triggerEvent)(this.passedElement, 'unhighlightItem', {
|
||||||
id: id,
|
id: id,
|
||||||
value: item.value,
|
value: item.value,
|
||||||
|
label: item.label,
|
||||||
groupValue: group.value
|
groupValue: group.value
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
(0, _utils.triggerEvent)(this.passedElement, 'unhighlightItem', {
|
(0, _utils.triggerEvent)(this.passedElement, 'unhighlightItem', {
|
||||||
id: id,
|
id: id,
|
||||||
value: item.value
|
value: item.value,
|
||||||
|
label: item.label
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -773,6 +777,8 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||||
this.input.focus();
|
this.input.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
(0, _utils.triggerEvent)(this.passedElement, "showDropdown", {});
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -803,6 +809,8 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||||
this.input.blur();
|
this.input.blur();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
(0, _utils.triggerEvent)(this.passedElement, "hideDropdown", {});
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
2
assets/scripts/dist/choices.js.map
vendored
2
assets/scripts/dist/choices.js.map
vendored
File diff suppressed because one or more lines are too long
2
assets/scripts/dist/choices.min.js
vendored
2
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -653,6 +653,8 @@ class Choices {
|
||||||
this.input.focus();
|
this.input.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
triggerEvent(this.passedElement, "showDropdown", {});
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -678,6 +680,8 @@ class Choices {
|
||||||
this.input.blur();
|
this.input.blur();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
triggerEvent(this.passedElement, "hideDropdown", {});
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -386,6 +386,52 @@ describe('Choices', () => {
|
||||||
expect(document.activeElement === this.choices.input && container.classList.contains(openState)).toBe(false);
|
expect(document.activeElement === this.choices.input && container.classList.contains(openState)).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should trigger showDropdown on dropdown opening', function() {
|
||||||
|
this.choices = new Choices(this.input);
|
||||||
|
const container = this.choices.containerOuter;
|
||||||
|
|
||||||
|
const showDropdownSpy = jasmine.createSpy('showDropdownSpy');
|
||||||
|
const passedElement = this.choices.passedElement;
|
||||||
|
|
||||||
|
passedElement.addEventListener('showDropdown', showDropdownSpy);
|
||||||
|
|
||||||
|
this.choices.input.focus();
|
||||||
|
|
||||||
|
this.choices._onClick({
|
||||||
|
target: container,
|
||||||
|
ctrlKey: false,
|
||||||
|
preventDefault: () => {}
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(showDropdownSpy).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should trigger hideDropdown on dropdown closing', function() {
|
||||||
|
this.choices = new Choices(this.input);
|
||||||
|
const container = this.choices.containerOuter;
|
||||||
|
|
||||||
|
const hideDropdownSpy = jasmine.createSpy('hideDropdownSpy');
|
||||||
|
const passedElement = this.choices.passedElement;
|
||||||
|
|
||||||
|
passedElement.addEventListener('hideDropdown', hideDropdownSpy);
|
||||||
|
|
||||||
|
this.choices.input.focus();
|
||||||
|
|
||||||
|
this.choices._onClick({
|
||||||
|
target: container,
|
||||||
|
ctrlKey: false,
|
||||||
|
preventDefault: () => {}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.choices._onClick({
|
||||||
|
target: container,
|
||||||
|
ctrlKey: false,
|
||||||
|
preventDefault: () => {}
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(hideDropdownSpy).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
it('should filter choices when searching', function() {
|
it('should filter choices when searching', function() {
|
||||||
this.choices = new Choices(this.input);
|
this.choices = new Choices(this.input);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue