Issue #3309894 by robphillips: Set is-filled when input is not empty.

js/choices.es6.js

@@ -43,6 +43,14 @@
           this.choices.containerOuter.element.classList.remove("is-filled");
         }
       });
+      element.addEventListener("search", () => {
+        this.choices.containerOuter.element.classList.add("is-filled");
+      });
+      this.choices.input.element.addEventListener("change", () => {
+        if (!this.hasValues() && !this.choices.input.element.value) {
+          this.choices.containerOuter.element.classList.remove("is-filled");
+        }
+      });
 
       // Set default choice labels.
       if (labels) {
@@ -117,12 +125,16 @@
     /**
      * Check if value(s) exist.
      *
-     * @returns {true|false}
+     * @return {true|false}
      *   Returns TRUE or FALSE.
      */
     hasValues() {
       const values = this.choices.getValue();
-      return (Array.isArray(values) && values.length) || (!Array.isArray(values) && values);
+      return (
+        this.choices.input.element.value ||
+        (Array.isArray(values) && values.length) ||
+        (!Array.isArray(values) && values)
+      );
     }
 
     /**

js/choices.js

@@ -38,6 +38,14 @@
           this.choices.containerOuter.element.classList.remove("is-filled");
         }
       });
+      element.addEventListener("search", () => {
+        this.choices.containerOuter.element.classList.add("is-filled");
+      });
+      this.choices.input.element.addEventListener("change", () => {
+        if (!this.hasValues() && !this.choices.input.element.value) {
+          this.choices.containerOuter.element.classList.remove("is-filled");
+        }
+      });
 
       if (labels) {
         const {
@@ -92,7 +100,7 @@
 
     hasValues() {
       const values = this.choices.getValue();
-      return Array.isArray(values) && values.length || !Array.isArray(values) && values;
+      return this.choices.input.element.value || Array.isArray(values) && values.length || !Array.isArray(values) && values;
     }
 
     isMax() {