From 69dc3004bdd4a9a57df0295cc20e6f5675072316 Mon Sep 17 00:00:00 2001
From: Brook Gagnon <brook@pikalabs.com>
Date: Mon, 1 Jul 2024 21:41:35 +0000
Subject: [PATCH] fix tag field on media add/edit form

---
 VERSION             |  2 +-
 js/media/addedit.js | 23 ++++++++++++++++-------
 ui/fields/tags.js   | 31 +++++++++++++++++++++++--------
 3 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/VERSION b/VERSION
index 4ded7f1e..24483bac 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-5.3.3-20240630
+5.3.3-20240701
diff --git a/js/media/addedit.js b/js/media/addedit.js
index b81e6577..0b7a2699 100644
--- a/js/media/addedit.js
+++ b/js/media/addedit.js
@@ -159,11 +159,6 @@ OB.Media.mediaAddeditForm = function(id,title,editing)
         });
       }
 
-      // set default
-      if (metadata.settings && metadata.settings.default) {
-        metadataField.querySelector('.metadata_name_field').value = metadata.settings.default;
-      }
-
       // change field name and description values
       metadataField.querySelector('label').innerText = metadata.description;
       metadataField.querySelector('.metadata_name_field').setAttribute('class', 'metadata_' + metadata.name + '_field');
@@ -172,6 +167,16 @@ OB.Media.mediaAddeditForm = function(id,title,editing)
       let form = document.querySelector('#media_addedit_' + id);
       let reference = form.querySelector('.addedit_form_container .copyright_field').parentElement;
       reference.before(metadataField);
+
+      // set default
+      if (metadata.settings && metadata.settings.default) {
+        document.querySelector('#media_addedit_' + id + ' .metadata_' + metadata.name + '_field').value = metadata.settings.default;
+      }
+
+      // set suggestions
+      if (metadata.type=='tags' && metadata?.settings?.suggestions) {
+        document.querySelector('#media_addedit_' + id + ' .metadata_' + metadata.name + '_field').suggestions = metadata.settings.suggestions;
+      }
     }
   });
 
@@ -582,9 +587,13 @@ OB.Media.editPage = function(ids)
       $.each(OB.Settings.media_metadata, function(index, metadata)
       {
         if(metadata.type=='tags') {
-          $form.find('.metadata_'+metadata.name+'_field').val( media['metadata_'+metadata.name].split(',') );
+          let newValue = [];
+          if (media['metadata_'+metadata.name]) {
+            newValue = media['metadata_'+metadata.name].split(',');
+          }
+          $form[0].querySelector('.metadata_'+metadata.name+'_field').value = newValue;
         }
-        else $form.find('.metadata_'+metadata.name+'_field').val( media['metadata_'+metadata.name] );
+        else $form[0].querySelector('.metadata_'+metadata.name+'_field').value = media['metadata_'+metadata.name];
       });
 
       items_selected = true;
diff --git a/ui/fields/tags.js b/ui/fields/tags.js
index dcc52ab3..e7cc0e87 100644
--- a/ui/fields/tags.js
+++ b/ui/fields/tags.js
@@ -22,13 +22,13 @@ class OBFieldTags extends OBField {
 
         this.renderComponent();
     }
-    
+
     renderEdit() {
-        if (! this.#tags) {
+        if (!this.#tags) {
             this.#tags = [];
         }
-        
-        if (! this.#suggestions) {
+
+        if (!this.#suggestions) {
             this.#suggestions = [];
         }
 
@@ -43,9 +43,9 @@ class OBFieldTags extends OBField {
                     <span id="current">${this.#currentTag}</span>
                 </div>
             </div>
-            ${this.#suggestions.filter((tag) => ! this.#tags.includes(tag)).length > 0 && html`
+            ${this.#suggestions.filter((tag) => !this.#tags.includes(tag)).length > 0 && html`
             <div id="suggestions" tabindex="0">
-                ${this.#suggestions.filter((tag) => ! this.#tags.includes(tag)).map((tag) => html`
+                ${this.#suggestions.filter((tag) => !this.#tags.includes(tag)).map((tag) => html`
                     <span class="suggestion" onclick=${(e) => this.tagsAdd(tag)}>${tag}</span>
                 `)}
             </div>
@@ -108,7 +108,7 @@ class OBFieldTags extends OBField {
                 }
 
                 #suggestions {
-                    display: flex;
+                    display: none;
                     align-items: center;
                     gap: 0.3em;
                     flex-wrap: wrap;
@@ -126,13 +126,17 @@ class OBFieldTags extends OBField {
                         word-wrap: anywhere;
                     }
                 }
+
+                #root:focus-within {
+                    #suggestions { display: flex; }
+                }
             }
         `;
     }
 
     tagsInput(event) {
         let keyCode = (event.key.length === 1) ? event.key.charCodeAt(0) : false;
-        
+
         if ((keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122)) {
             // A-Z and a-z
             this.#currentTag += event.key;
@@ -191,6 +195,17 @@ class OBFieldTags extends OBField {
         }
     }
 
+    set suggestions(value) {
+        if (Array.isArray(value)) {
+            this.#suggestions = [...new Set(value)];
+            this.renderComponent();
+        }
+    }
+
+    get suggestions() {
+        return this.#suggestions;
+    }
+
     #loadInnerTags() {
         var tags = [];