pass along value in data if not set

lekoala · Nov 22, 2024 · ddf9efb · ddf9efb
1 parent e3091e7
commit ddf9efb
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/demo.html b/demo.html
@@ -925,7 +925,7 @@ <h1>Demo</h1>
         <div class="row mb-3 g-3">
           <div class="col-md-4">
             <label for="liveInitialValue" class="form-label">Tags (live server side + initial value)</label>
-            <select class="form-select" id="liveInitialValue" name="tags_live_initial[]" multiple data-allow-new="true"
+            <select class="form-select" id="liveInitialValue" name="tags_live_initial[]" multiple data-allow-new="true" data-allow-same="false"
               data-server="demo.json" data-live-server="1" data-items='{"some": "some", "value": "value"}' data-selected="some,value"
               data-server-params='{"key":"val"}'>
               <option disabled hidden value="">Choose a tag...</option>

diff --git a/demo.json b/demo.json
@@ -3,6 +3,14 @@
     "value": "server1",
     "label": "Server 1"
   },
+  {
+    "value": "server1_duplicate",
+    "label": "Server 1"
+  },
+  {
+    "value": "server1",
+    "label": "Server 1 (duplicate label)"
+  },
   {
     "value": "server2",
     "label": "Server 2 Orange",

diff --git a/tags.js b/tags.js
@@ -1277,6 +1277,10 @@ class Tags {
    * @returns {HTMLOptionElement|null}
    */
   _add(text, value = null, data = {}) {
+    // Pass along value in data for canAdd()
+    if(!data.value && value) {
+      data.value = value;
+    }
     if (!this.canAdd(text, data)) {
       return null;
     }
@@ -2000,11 +2004,12 @@ class Tags {
   /**
    * Find if label is already selectable (based on attribute)
    * @param {string} text
+   * @param {Object} data
    * @returns {Boolean}
    */
-  _isSelectable(text) {
+  _isSelectable(text, data) {
     const arr = Array.from(this._selectElement.querySelectorAll("option"));
-    const opts = arr.filter((el) => el.textContent == text);
+    const opts = data.value ? arr.filter((el) => el.value == data.value) : arr.filter((el) => el.textContent == text);
     // Only consider actual <option> in the select
     if (opts.length > 0) {
       const freeOpt = opts.find((opt) => !opt.getAttribute("selected"));
@@ -2195,7 +2200,7 @@ class Tags {
           return false;
         }
       } else {
-        if (!this._isSelectable(text)) {
+        if (!this._isSelectable(text, data)) {
           return false;
         }
       }