Add support for standard-compliant placeholder option (#617)

* Add support for standard-compliant placeholder option

* Bump version and rebuild files

README.md

@@ -400,13 +400,15 @@ const example = new Choices(element, {
 
 ```html
 <select>
-  <option placeholder>This is a placeholder</option>
+  <option value="">This is a placeholder</option>
   <option>...</option>
   <option>...</option>
   <option>...</option>
 </select>
 ```
 
+For backward compatibility, `<option placeholder>This is a placeholder</option>` is also supported.
+
 ### placeholderValue
 **Type:** `String` **Default:** `null`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choices.js",
-  "version": "7.0.6",
+  "version": "7.1.0",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./public/assets/scripts/choices.min.js",
   "types": "./types/index.d.ts",

public/assets/styles/base.css

@@ -78,8 +78,7 @@ a:focus {
   border-radius: 2.5px;
   font-size: 14px;
   -webkit-appearance: none;
-  -moz-appearance: none;
-       appearance: none;
+  appearance: none;
   margin-bottom: 24px;
 }
 

public/assets/styles/choices.css

@@ -19,7 +19,9 @@
 .choices.is-disabled .choices__input {
   background-color: #EAEAEA;
   cursor: not-allowed;
-  user-select: none;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 .choices.is-disabled .choices__item {
@@ -302,7 +304,9 @@
 
 .choices__item--disabled {
   cursor: not-allowed;
-  user-select: none;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   opacity: .5;
 }
 

public/index.html

@@ -157,7 +157,7 @@ <h2>Multiple select input</h2>
       <h2>Single select input</h2>
       <label for="choices-single-default">Default</label>
       <select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
-        <option placeholder>This is a placeholder</option>
+        <option value="">This is a placeholder</option>
         <option value="Choice 1">Choice 1</option>
         <option value="Choice 2">Choice 2</option>
         <option value="Choice 3">Choice 3</option>
@@ -167,12 +167,12 @@ <h2>Single select input</h2>
 
       <label for="choices-single-remote-fetch">Options from remote source (Fetch API)</label>
       <select class="form-control" name="choices-single-remote-fetch" id="choices-single-remote-fetch">
-        <option placeholder>Pick an Arctic Monkeys' record</option>
+        <option value="">Pick an Arctic Monkeys' record</option>
       </select>
 
       <label for="choices-single-remove-xhr">Options from remote source (XHR) &amp; remove button</label>
       <select class="form-control" name="choices-single-remove-xhr" id="choices-single-remove-xhr">
-        <option placeholder>Pick a Smiths' record</option>
+        <option value="">Pick a Smiths' record</option>
       </select>
 
       <label for="choices-single-groups">Option groups</label>

src/scripts/components/wrapped-select.js

@@ -7,7 +7,11 @@ export default class WrappedSelect extends WrappedElement {
   }
 
   get placeholderOption() {
-    return this.element.querySelector('option[placeholder]');
+    return (
+      this.element.querySelector('option[value=""]') ||
+      // Backward compatibility layer for the non-standard placeholder attribute supported in older versions.
+      this.element.querySelector('option[placeholder]')
+    );
   }
 
   get optionGroups() {