Merge 2f88ff4fc3 into ebbea8c3b0

README.md

@@ -128,6 +128,7 @@ Or include Choices directly:
     sorter: () => {...},
     placeholder: true,
     placeholderValue: null,
+    searchInputMoveToTop: false,
     searchPlaceholderValue: null,
     prependValue: null,
     appendValue: null,
@@ -485,6 +486,14 @@ For backward compatibility, `<option placeholder>This is a placeholder</option>`
 
 **Usage:** The value of the search inputs placeholder.
 
+### searchInputMoveToTop
+
+**Type:** `Boolean` **Default:** `false`
+
+**Input types affected:** `select-one`
+
+**Usage:** The move search input to top.
+
 ### prependValue
 
 **Type:** `String` **Default:** `null`

package.json

@@ -125,7 +125,7 @@
   "bundlesize": [
     {
       "path": "public/assets/scripts/choices.min.js",
-      "maxSize": "20 kB"
+      "maxSize": "22 kB"
     },
     {
       "path": "public/assets/styles/choices.min.css",

public/assets/styles/choices.css

@@ -45,6 +45,12 @@
   padding-bottom: 7.5px;
 }
 
+.choices[data-type*='select-one'] .choices__inner .choices__input {
+  padding: 5px;
+  border-bottom: none;
+  background-color: transparent;
+}
+
 .choices[data-type*='select-one'] .choices__input {
   display: block;
   width: 100%;
@@ -374,4 +380,8 @@
   opacity: 0.5;
 }
 
+.choices__placeholder.choices__item--disabled {
+  display: none;
+}
+
 /*=====  End of Choices  ======*/

public/index.html

@@ -498,6 +498,14 @@
           >
         </select>
 
+        <label for="choices-single-input-move-to-top">Search input move to top</label>
+        <select
+          class="form-control"
+          name="choices-single-input-move-to-top"
+          id="choices-single-input-move-to-top"
+        >
+        </select>
+
         <hr />
         <h2>Form interaction</h2>
         <p>Change the values and press reset to restore to initial state.</p>
@@ -711,6 +719,16 @@
             });
         });
 
+        var singleInputMoveToTop = new Choices('#choices-single-input-move-to-top', {
+          searchInputMoveToTop: true,
+          searchPlaceholderValue: 'This is a search placeholder',
+          choices: [
+            { value: '', label: '', placeholder: true, disabled: true },
+            { value: 'Two', label: 'Label Two', selected: true },
+            { value: 'Three', label: 'Label Three' },
+          ],
+        });
+
         var singleNoSearch = new Choices('#choices-single-no-search', {
           searchEnabled: false,
           removeItemButton: true,

src/scripts/choices.ts

@@ -92,6 +92,7 @@ class Choices {
   _isSelectOneElement: boolean;
   _isSelectMultipleElement: boolean;
   _isSelectElement: boolean;
+  _needInputMoveToTop: boolean;
   _store: Store;
   _templates: typeof templates;
   _initialState: State;
@@ -160,6 +161,9 @@ class Choices {
     this.config.searchEnabled =
       this._isSelectMultipleElement || this.config.searchEnabled;
 
+    this._needInputMoveToTop =
+      this._isSelectOneElement && this.config.searchInputMoveToTop;
+
     if (!['auto', 'always'].includes(`${this.config.renderSelectedChoices}`)) {
       this.config.renderSelectedChoices = 'auto';
     }
@@ -475,6 +479,11 @@ class Choices {
   }
 
   hideDropdown(preventInputBlur?: boolean): this {
+    const { activeItems } = this._store;
+    if (this._needInputMoveToTop && activeItems) {
+      this.input.value = activeItems[0].label;
+    }
+
     if (!this.dropdown.isActive) {
       return this;
     }
@@ -1117,7 +1126,9 @@ class Choices {
       }
     }
 
-    this.clearInput();
+    if (!this._needInputMoveToTop) {
+      this.clearInput();
+    }
 
     // We want to close the dropdown if we are dealing with a single select box
     if (hasActiveDropdown && this._isSelectOneElement) {
@@ -1525,7 +1536,9 @@ class Choices {
         this.hideDropdown(true);
         this._addItem({ value });
         this._triggerChange(value);
-        this.clearInput();
+        if (!this._needInputMoveToTop) {
+          this.clearInput();
+        }
       }
     }
 
@@ -1948,6 +1961,10 @@ class Choices {
       this.removeActiveItems(id);
     }
 
+    if (this._needInputMoveToTop) {
+      this.input.value = passedLabel;
+    }
+
     // Trigger change event
     this.passedElement.triggerEvent(EVENTS.addItem, {
       id,
@@ -2159,13 +2176,16 @@ class Choices {
 
     this.containerOuter.element.appendChild(this.containerInner.element);
     this.containerOuter.element.appendChild(this.dropdown.element);
-    this.containerInner.element.appendChild(this.itemList.element);
+
+    if (!this._needInputMoveToTop) {
+      this.containerInner.element.appendChild(this.itemList.element);
+    }
 
     if (!this._isTextElement) {
       this.dropdown.element.appendChild(this.choiceList.element);
     }
 
-    if (!this._isSelectOneElement) {
+    if (!this._isSelectOneElement || this._needInputMoveToTop) {
       this.containerInner.element.appendChild(this.input.element);
     } else if (this.config.searchEnabled) {
       this.dropdown.element.insertBefore(
@@ -2258,8 +2278,6 @@ class Choices {
           const isSelected = shouldPreselect ? true : choice.selected;
           const isDisabled = choice.disabled;
 
-          console.log(isDisabled, choice);
-
           this._addChoice({
             value,
             label,

src/scripts/constants.ts

@@ -50,6 +50,7 @@ export const DEFAULT_CONFIG: Options = {
   duplicateItemsAllowed: true,
   delimiter: ',',
   paste: true,
+  searchInputMoveToTop: false,
   searchEnabled: true,
   searchChoices: true,
   searchFloor: 1,

src/scripts/interfaces.ts

@@ -438,6 +438,15 @@ export interface Options {
    */
   paste: boolean;
 
+  /**
+   * Whether search input should be in top.
+   *
+   * **Input types affected:** select-one
+   *
+   * @default false
+   */
+  searchInputMoveToTop: boolean;
+
   /**
    * Whether a search area should be shown.
    *

src/styles/choices.scss

@@ -58,6 +58,11 @@ $choices-z-index: 1;
   cursor: pointer;
   .#{$choices-selector}__inner {
     padding-bottom: 7.5px;
+    .#{$choices-selector}__input {
+      padding: 5px;
+      border-bottom: none;
+      background-color: transparent;
+    }
   }
   .#{$choices-selector}__input {
     display: block;
@@ -357,4 +362,8 @@ $choices-z-index: 1;
   opacity: 0.5;
 }
 
+.#{$choices-selector}__placeholder.#{$choices-selector}__item--disabled {
+  display: none;
+}
+
 /*=====  End of Choices  ======*/