Fix placeholder visibility in single select (#1764)

mdbootstrap · Jul 5, 2023 · 34ac4ff · 34ac4ff
1 parent c345793
commit 34ac4ff
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/src/js/forms/select/index.js b/src/js/forms/select/index.js
@@ -224,6 +224,10 @@ class Select {
     this._config = this._getConfig(config);
     this._classes = this._getClasses(classes);
 
+    if (this._config.selectPlaceholder && !this._config.multiple) {
+      this._addPlaceholderOption();
+    }
+
     this._optionsToRender = this._getOptionsToRender(element);
 
     // optionsToRender may contain option groups and nested options, in this case
@@ -377,6 +381,14 @@ class Select {
     return classes;
   }
 
+  _addPlaceholderOption() {
+    const placeholderOption = new Option("", "", true, true);
+    placeholderOption.hidden = true;
+    placeholderOption.selected = true;
+
+    this._element.prepend(placeholderOption);
+  }
+
   _getOptionsToRender(select) {
     const options = [];
 
@@ -1093,7 +1105,11 @@ class Select {
       return;
     }
 
-    if (this._input.value === "" && this._fakeValue.innerHTML !== "") {
+    if (
+      this._input.value === "" &&
+      this._fakeValue.innerHTML !== "" &&
+      !this._config.selectPlaceholder
+    ) {
       this._isFakeValueActive = true;
       this._fakeValue.setAttribute(DATA_ACTIVE, "");
     } else {