fix placeholder and support size controls

lekoala · Apr 19, 2022 · 7a69010 · 7a69010
1 parent 2310cad
commit 7a69010
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/demo.html b/demo.html
@@ -285,7 +285,7 @@ <h1>Demo</h1>
               data-allow-clear="1"
               data-suggestions-threshold="0"
             >
-              <option value="">Type a tag...</option>
+              <option value="">ㅂㅈㄷㄱㅅㅁㄴㅇㄹㅎㅋㅌㅊ...</option>
               <!-- you need at least one option with the placeholder -->
               <option value="1">Apple</option>
               <option value="2">Banana</option>
@@ -312,6 +312,27 @@ <h1>Demo</h1>
             </select>
           </div>
         </div>
+        <div class="row mb-3 g-3">
+          <div class="col-md-4">
+            <label for="maxTagsBigger" class="form-label">Tags (max 2 tags + clear), but bigger!</label>
+            <select
+              class="form-select form-select-lg"
+              id="maxTagsBigger"
+              name="tags_max_bigger[]"
+              multiple
+              data-allow-new="true"
+              data-max="2"
+              data-allow-clear="1"
+              data-suggestions-threshold="0"
+            >
+              <option value="">ㅂㅈㄷㄱㅅㅁㄴㅇㄹㅎㅋㅌㅊ...</option>
+              <!-- you need at least one option with the placeholder -->
+              <option value="1">Apple</option>
+              <option value="2">Banana</option>
+              <option value="3">Orange</option>
+            </select>
+          </div>
+        </div>
         <div class="row mb-3 g-3">
           <div class="col-md-4">
             <label for="max1Tags" class="form-label">Tags (max 1 tag + clear)</label>
@@ -439,6 +460,13 @@ <h1>Demo</h1>
           <option value="2">Banana</option>
           <option value="3">Orange</option>
         </select>
+        <p>A bigger select</p>
+        <select class="form-select form-select-lg ignore-tags mb-2" id="regular_lg" name="regular_lg[]">
+          <option disabled hidden value="">Choose a tag...</option>
+          <option value="1" selected="selected">Apple</option>
+          <option value="2">Banana</option>
+          <option value="3">Orange</option>
+        </select>
         <label for="validationCustom04" class="form-label">A regular select below to test required</label>
         <select class="form-select ignore-tags mb-2" id="validationCustom04" required>
           <option selected disabled value="">Choose...</option>

diff --git a/tags.js b/tags.js
@@ -250,6 +250,12 @@ class Tags {
 
   _configureHolderElement() {
     this._holderElement.classList.add(...["form-control", "dropdown"]);
+    if (this._selectElement.classList.contains("form-select-lg")) {
+      this._holderElement.classList.add("form-control-lg");
+    }
+    if (this._selectElement.classList.contains("form-select-sm")) {
+      this._holderElement.classList.add("form-control-sm");
+    }
     // If we don't have an overflow parent, we can simply inherit styles
     // If we have an overflow parent, it needs a relatively positioned element
     if (this.overflowParent) {
@@ -460,14 +466,12 @@ class Tags {
 
   /**
    * @param {string} text
-   * @param {string} font
    * @param {string} size
    * @returns {Number}
    */
-  _calcTextWidth(text, font = null, size = null) {
+  _calcTextWidth(text, size = null) {
     var span = document.createElement("span");
     document.body.appendChild(span);
-    span.style.font = font || "inherit";
     span.style.fontSize = size || "inherit";
     span.style.height = "auto";
     span.style.width = "auto";
@@ -485,8 +489,6 @@ class Tags {
   _adjustWidth() {
     if (this._searchInput.value) {
       this._searchInput.size = this._searchInput.value.length;
-      // If the string contains ascii chars or strange font, input size may be wrong
-      this._searchInput.style.width = this._calcTextWidth(this._searchInput.value) + "px";
     } else {
       // Show the placeholder only if empty
       if (this.getSelectedValues().length) {
@@ -497,6 +499,12 @@ class Tags {
         this._searchInput.placeholder = this.placeholder;
       }
     }
+
+    // If the string contains ascii chars or strange font, input size may be wrong
+    const v = this._searchInput.value || this._searchInput.placeholder;
+    const computedFontSize = window.getComputedStyle(this._holderElement).fontSize;
+    const w = this._calcTextWidth(v, computedFontSize);
+    this._searchInput.style.minWidth = w + "px";
   }
 
   /**