select-one : bugfix focus

yabab-dev · Jul 31, 2016 · e8a5158 · e8a5158
1 parent 57c241a
commit e8a5158
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 3 deletions.
diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js
@@ -988,6 +988,18 @@ export class Choices {
             }
         }
     }
+
+    /**
+     * Focus event on fake button (select-one only)
+     * @param  {Object} e Event
+     * @return
+     * @private
+     */
+    _onFocusFakeButton(e){
+        this.input.dispatchEvent(new Event('focus'));
+        this.input.focus();
+        this.input.select();
+    }
 
     /**
      * Blur event
@@ -1260,10 +1272,14 @@ export class Choices {
                 return strToEl(`<div class="${ classNames.containerOuter }" data-type="${ this.passedElement.type }"></div>`);
             },
             containerInner: () => {
+                var fakeButton = '';
+                if(this.passedElement.type === 'select-one') {
+                    fakeButton = `<button data-fake-focus></button>`;
+                }
                 if(this.config.removeItemButton && this.passedElement.type === 'select-one') {
-                    return strToEl(`<div class="${ classNames.containerInner }"><button class="${ classNames.button } choices__clear_one" data-clear-one>Remove current selection</button></div>`);
+                    return strToEl(`<div class="${ classNames.containerInner }">${ fakeButton }<button class="${ classNames.button } choices__clear_one" data-clear-one>Remove current selection</button></div>`);
                 }else{
-                    return strToEl(`<div class="${ classNames.containerInner }"></div>`);
+                    return strToEl(`<div class="${ classNames.containerInner }">${ fakeButton }</div>`);
                 }
             },
             itemList: () => {
@@ -1606,6 +1622,11 @@ export class Choices {
         document.addEventListener('keydown', this._onKeyDown);
         document.addEventListener('mousedown', this._onMouseDown);
         document.addEventListener('mouseover', this._onMouseOver);
+
+        if(this.passedElement.type === 'select-one'){
+            const fakeButton = this.containerInner.querySelector('[data-fake-focus]');
+            fakeButton.addEventListener('focus', this._onFocusFakeButton.bind(this));
+        }
 
         this.input.addEventListener('input', this._onInput);
         this.input.addEventListener('paste', this._onPaste);
@@ -1624,6 +1645,11 @@ export class Choices {
         document.removeEventListener('mousedown', this._onMouseDown);
         document.removeEventListener('mouseover', this._onMouseOver);
 
+        if(this.passedElement.type === 'select-one'){
+            const fakeButton = this.containerInner.querySelector('[data-fake-focus]');
+            fakeButton.removeEventListener('focus', this._onFocusFakeButton);
+        }
+
         this.input.removeEventListener('input', this._onInput);
         this.input.removeEventListener('paste', this._onPaste);
         this.input.removeEventListener('focus', this._onFocus);

diff --git a/assets/styles/css/choices.css b/assets/styles/css/choices.css
@@ -28,6 +28,13 @@
   background-color: #FFFFFF;
   margin: 0; }
 
+.choices[data-type*="select-one"] [data-fake-focus] {
+  width: 0;
+  height: 0;
+  border: 0;
+  background: transparent;
+  outline: none; }
+
 .choices[data-type*="select-one"].is-open:after {
   border-color: transparent transparent #333333 transparent;
   margin-top: -7.5px; }

diff --git a/assets/styles/css/choices.min.css b/assets/styles/css/choices.min.css
diff --git a/assets/styles/scss/choices.scss b/assets/styles/scss/choices.scss
@@ -40,6 +40,13 @@ $choices-button-icon-black-path: '../../icons/cross-black.svg';
         background-color: #FFFFFF;
         margin: 0;
     }
+    [data-fake-focus] {
+        width: 0;
+        height: 0;
+        border: 0;
+        background: transparent;
+        outline: none;
+    }
     &.is-open:after { 
         border-color: transparent transparent $choices-text-color transparent; 
         margin-top: -7.5px;