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

Ensure focus is consisent across single select boxes with/without search

Browse source
This commit is contained in:
Josh Johnson 2016-08-02 14:40:36 +01:00
parent 72ac456148
commit 3585fdfd6a
8 changed files with 22 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/scripts/dist/choices.min.js vendored
View file

File diff suppressed because one or more lines are too long

25
assets/scripts/src/choices.js
View file

@ -1053,15 +1053,18 @@ export class Choices {
_onBlur(e) {
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
// If the blurred element is this input
if(e.target === this.input) {
// If the blurred element is this input or the outer container
if(e.target === this.input || e.target === this.containerOuter) {
// Remove the focus state
this.containerOuter.classList.remove(this.config.classNames.focusState);
}
// Close the dropdown if there is one
if(hasActiveDropdown) {
this.hideDropdown();
// Close the dropdown if there is one
if(hasActiveDropdown) {
if(e.target === this.input || e.target === this.containerOuter && !this.config.search) {
this.hideDropdown();
}
}
}
}
@ -1666,10 +1669,7 @@ export class Choices {
if(this.passedElement.type && this.passedElement.type === 'select-one') {
this.containerOuter.addEventListener('focus', this._onFocus);
if(!this.canSearch) {
this.containerOuter.addEventListener('blur', this._onBlur);
}
this.containerOuter.addEventListener('blur', this._onBlur);
}
this.input.addEventListener('input', this._onInput);
@ -1691,10 +1691,7 @@ export class Choices {
if(this.passedElement.type && this.passedElement.type === 'select-one') {
this.containerOuter.removeEventListener('focus', this._onFocus);
if(!this.canSearch) {
this.containerOuter.removeEventListener('blur', this._onBlur);
}
this.containerOuter.removeEventListener('blur', this._onBlur);
}
this.input.removeEventListener('input', this._onInput);

6
assets/styles/css/base.css
View file

@ -14,7 +14,8 @@ html {
html, body {
position: relative;
margin: 0;
width: 100%; }
width: 100%;
height: 100%; }
body {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@ -22,9 +23,6 @@ body {
line-height: 1.4;
color: #FFFFFF;
background-color: #333;
background: -webkit-linear-gradient(right top, #333, #262626);
background: linear-gradient(to left bottom, #333, #262626);
height: 100%;
overflow-x: hidden; }
label {

2
assets/styles/css/base.min.css vendored
View file

@ -1 +1 @@
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%}html{font-size:62.5%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;line-height:1.4;color:#fff;background-color:#333;background:-webkit-linear-gradient(right top,#333,#262626);background:linear-gradient(to left bottom,#333,#262626);height:100%;overflow-x:hidden}hr,label{display:block}label{margin-bottom:.8rem;font-size:1.4rem;font-weight:500}hr{margin:3.6rem 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.h1,h1{font-size:3.2rem}.h2,h2{font-size:2.4rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.8rem}.h5,h5{font-size:1.6rem}.h6,h6{font-size:1.4rem}.container{display:block;margin:auto;max-width:40em;padding:4.8rem}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:2.4rem;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}html{font-size:62.5%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label{margin-bottom:.8rem;font-size:1.4rem;font-weight:500}hr{margin:3.6rem 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.h1,h1{font-size:3.2rem}.h2,h2{font-size:2.4rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.8rem}.h5,h5{font-size:1.6rem}.h6,h6{font-size:1.4rem}.container{display:block;margin:auto;max-width:40em;padding:4.8rem}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:2.4rem;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}

2
assets/styles/css/choices.min.css vendored
View file

@ -1 +1 @@
.choices{position:relative;margin-bottom:2.4rem}.choices:last-child{margin-bottom:0}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices[data-type*=select-one] .choices__inner{cursor:pointer;padding-bottom:.75rem}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:1rem;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-one]:after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent transparent;border-width:5px;position:absolute;right:1.15rem;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices__inner{background-color:#f9f9f9;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:.25rem .25rem 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 .25rem .25rem}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--single{display:inline-block;padding:.4rem;pointer-events:none}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:2rem;padding:.4rem 1rem;font-size:1.2rem;font-weight:500;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all}.choices__list--multiple .choices__item[data-deletable]{padding-right:.5rem}.choices__list--multiple .choices__item.is-highlighted{background-color:#00a5bb;border:1px solid #008fa1}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;overflow:hidden}.choices__list--dropdown.is-active{display:block}.is-open .choices__list--dropdown{border-color:#b7b7b7}.is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__list--dropdown .choices__item--selectable:after{content:"Press to select";font-size:12px;opacity:0;float:right}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__group .choices__heading{font-weight:600;font-size:1.2rem;padding:1rem;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-image:url(../../icons/cross.svg);background-repeat:no-repeat;background-position:center;background-size:8px;border-left:1px solid #008fa1;margin-left:4px;margin-right:-4px;padding-left:6px;padding-right:6px;line-height:1;cursor:pointer}.choices__input{background-color:#f9f9f9;font-size:1.4rem;padding:0;margin-bottom:.5rem;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:.4rem 0 .4rem .2rem}.choices__input:focus{outline:0}
.choices{position:relative;margin-bottom:2.4rem}.choices:last-child{margin-bottom:0}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices:focus{outline:none}.choices[data-type*=select-one] .choices__inner{cursor:pointer;padding-bottom:.75rem}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:1rem;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one].is-open:after{border-color:transparent transparent #333 transparent;margin-top:-7.5px}.choices[data-type*=select-one]:after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent transparent;border-width:5px;position:absolute;right:1.15rem;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices__inner{background-color:#f9f9f9;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:.25rem .25rem 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 .25rem .25rem}.choices__list{margin:0;padding-left:0;list-style-type:none}.choices__list--single{display:inline-block;padding:.4rem;pointer-events:none}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:2rem;padding:.4rem 1rem;font-size:1.2rem;font-weight:500;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;border:1px solid #00a5bb;color:#fff;word-break:break-all}.choices__list--multiple .choices__item[data-deletable]{padding-right:.5rem}.choices__list--multiple .choices__item.is-highlighted{background-color:#00a5bb;border:1px solid #008fa1}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;overflow:hidden}.choices__list--dropdown.is-active{display:block}.is-open .choices__list--dropdown{border-color:#b7b7b7}.is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item{padding:1rem;font-size:1.4rem}.choices__list--dropdown .choices__item--selectable:after{content:"Press to select";font-size:12px;opacity:0;float:right}.choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5}.choices__group .choices__heading{font-weight:600;font-size:1.2rem;padding:1rem;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-image:url(../../icons/cross.svg);background-repeat:no-repeat;background-position:center;background-size:8px;border-left:1px solid #008fa1;margin-left:4px;margin-right:-4px;padding-left:6px;padding-right:6px;line-height:1;cursor:pointer}.choices__input{background-color:#f9f9f9;font-size:1.4rem;padding:0;margin-bottom:.5rem;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%;padding:.4rem 0 .4rem .2rem}.choices__input:focus{outline:0}

3
assets/styles/scss/base.scss
View file

@ -26,6 +26,7 @@ html, body {
position: relative;
margin: 0;
width: 100%;
height: 100%;
}
body {
@ -34,8 +35,6 @@ body {
line-height: 1.4;
color: #FFFFFF;
background-color: #333;
background: linear-gradient(to left bottom,#333,#262626);
height: 100%;
overflow-x: hidden;
}

4
assets/styles/scss/choices.scss
View file

@ -24,9 +24,7 @@ $choices-button-icon-path: '../../icons/cross.svg';
}
.choices__item { cursor: not-allowed; }
}
&:focus{
outline: none;
}
&:focus { outline: none; }
}
.choices[data-type*="select-one"] {

6
index.html
View file

@ -145,7 +145,7 @@
<label for="choices-14">Countries from remote source (XHR)</label>
<select name="choices-14" id="choices-14" placeholder="Pick a country"></select>
<label for="choices-15">Options added via config</label>
<label for="choices-15">Options added via config with no search</label>
<select name="choices-15" id="choices-15" placeholder="This is a placeholder">
<option value="0">Zero</option>
</select>
@ -208,7 +208,7 @@
console.log(error);
});
});
var choices12 = new Choices('#choices-12', {
placeholder: true,
placeholderValue: 'Pick an Arctic Monkeys record'
@ -245,7 +245,7 @@
var choicesMultiple = new Choices('[data-choice]', {
placeholderValue: 'This is a placeholder set in the config',
removeButton: true
removeButton: true,
});
var choices15 = new Choices('#choices-15', {