Toggable single select drop downs

This commit is contained in:
Josh Johnson 2016-08-08 13:58:37 +01:00
parent bae54c115d
commit 5caa5e4684
2 changed files with 14 additions and 11 deletions

File diff suppressed because one or more lines are too long

View file

@ -1015,15 +1015,19 @@ export class Choices {
*/ */
_onTouchEnd(e) { _onTouchEnd(e) {
const target = e.target || e.touches[0].target; const target = e.target || e.touches[0].target;
// If a user tapped within our container...
if(this.wasTap === true && this.containerOuter.contains(target)) { if(this.wasTap === true && this.containerOuter.contains(target)) {
// If there was no scrolling, open/focus element // ...and we aren't dealing with a single select box, show dropdown/focus input
if((target === this.containerOuter || target === this.containerInner) && this.passedElement.type !== 'select-one') { if((target === this.containerOuter || target === this.containerInner) && this.passedElement.type !== 'select-one') {
if(this.passedElement.type === 'text') { if(this.passedElement.type === 'text') {
// If text element, we only want to focus the input (if it isn't already)
if(document.activeElement !== this.input) { if(document.activeElement !== this.input) {
this.input.focus(); this.input.focus();
} }
} else { } else {
// If a select box, we want to show the dropdown
this.showDropdown(); this.showDropdown();
if(this.canSearch && document.activeElement !== this.input) { if(this.canSearch && document.activeElement !== this.input) {
this.input.focus(); this.input.focus();
@ -1031,6 +1035,7 @@ export class Choices {
} }
} }
// Prevents focus event firing
e.stopPropagation(); e.stopPropagation();
} }
@ -1057,19 +1062,17 @@ export class Choices {
// If dropdown is not active... // If dropdown is not active...
if(!hasActiveDropdown) { if(!hasActiveDropdown) {
if(this.passedElement.type !== 'text') { if(this.passedElement.type === 'text') {
// For select inputs we always want to show the dropdown if it isn't already showing if(document.activeElement !== this.input) {
this.showDropdown();
if(this.canSearch) {
this.input.focus(); this.input.focus();
} }
} else { } else {
// If input is not in focus, it ought to be this.showDropdown();
if(this.input !== document.activeElement) { if(this.canSearch && document.activeElement !== this.input) {
this.input.focus(); this.input.focus();
} }
} }
} else if(this.passedElement.type === 'select-one' && hasActiveDropdown && target === this.containerInner) { } else if(this.passedElement.type === 'select-one' && hasActiveDropdown) {
this.hideDropdown(); this.hideDropdown();
} }