UI fix, Tags field Interaction Fix

Author: Sundraiz-Shah

meta_creator/templates/meta_creator/showdata.html

@@ -304,7 +304,9 @@ <h1>Extra Hints!</h1>
                                             <div class="person-info collapsible-content collapse" id="multiCollapsemaintainer">
                                                 <p>An "maintainer" in software authorship is someone who significantly maintainers to the creation and development of software, including roles like coding, project management, and documentation.</p>
                                             </div>
+                                            <span class="highlight-tag"> ⚠️ Click on contributors,authors or maintainers to see the description<span class="acknowledge-tag">Got it!</span></span>
                                             </div>
+
                                             {% endif %}
                                             <input type="hidden" id="{{ key }}TableHiddenInput" name="{{ key }}TableHiddenInput"
                                                 value='{{ value }}'>
@@ -415,7 +417,7 @@ <h1>Extra Hints!</h1>
                                                         {% if unique_tab %}
                                                         {% for col, value in metadata_dict.items %}
                                                         <td data-col="{{ col }}" data-coltype="element" class="text-center">                                                    
-                                                            <input type="checkbox" class="checkbox-element" data-role="{{ col }}" name="checkbox-{{ col }}">
+                                                            <!-- <input type="checkbox" class="checkbox-element" data-role="{{ col }}" name="checkbox-{{ col }}" disabled> -->
                                                         </td>
                                                         {% endfor %}
                                                         {% endif %}

static/foundation/css/foundation.css

@@ -339,10 +339,6 @@ form.data-form3 {
   margin: 5% 0% 0% 0%;
 }
 
-#Relatedpersons .tab.active {
-  display: grid;
-}
-
 .tab-description {
   background: #f5f7fa;
   border-left: 4px solid #0078d4;

static/foundation/js/vendor/table-utils.js

@@ -247,8 +247,8 @@ export function setupTables() {
         const col = input ? input.getAttribute("data-col") : null;
         const dataType = table.getAttribute("data-at-type");
         const td = document.createElement("td");
-        td.className = "text-center";
-        console.log({ header, input, col, colType, dataType });
+        td.classList.add("text-left");
+        // td.className = "text-center";
         if (colType === "element") {
           // Find the checkbox in the add-row-controls row
           console.log("Looking for checkbox with data-role:", col);
@@ -262,25 +262,23 @@ export function setupTables() {
           checkbox.name = `checkbox-${col}`;
           console.log("Try to check for checkbox");
           console.log({ checkboxInput });
+
           // Set checked state based on add-row-controls checkbox
           if (checkboxInput && checkboxInput.checked) {
             checkbox.checked = true;
-            console.log("Copyied checked state");
           }
           td.setAttribute("data-col", col);
           td.setAttribute("data-coltype", "element");
           td.setAttribute("data-type", dataType);
           td.appendChild(checkbox);
         } else if (colType === "dropdown") {
-          console.log("Got to dropdown");
           td.className = "table-tagging-cell";
           td.setAttribute("data-col", col);
           td.setAttribute("data-coltype", "dropdown");
           td.setAttribute("data-type", dataType);
 
           // Show the selected value as plain text
           const value = input ? input.value : "";
-          console.log("Selected value:", input.value);
           td.textContent = value;
         } else if (
           colType === "tagging" ||
@@ -345,7 +343,13 @@ export function setupTables() {
 
       // Insert new row above add-row-controls
       addRowControls.parentNode.insertBefore(newRow, addRowControls);
-
+      // Check if this td contains a checkbox
+      document.querySelectorAll("td").forEach((td) => {
+        if (td.querySelector('input[type="checkbox"]')) {
+          td.classList.remove("text-left"); // remove old alignment
+          td.classList.add("text-center"); // add new alignment
+        }
+      });
       initializeTableTaggingCells();
       enableEditableTagsInTable();
 

static/foundation/js/vendor/tagging.js

@@ -175,12 +175,14 @@ export function setupTagging({
         e.preventDefault();
         items[activeSuggestionIndex].click();
         enterHandledBySuggestion = true;
+        setTimeout(() => input.focus(), 200);
         return;
       }
 
-      if (e.key === "Escape") {
+      if (e.key === "Escape" || e.key === "Tab") {
         suggestionsBox.style.display = "none";
         activeSuggestionIndex = -1;
+        input.blur();
       }
     });
 
@@ -230,7 +232,7 @@ export function setupTagging({
         div.onclick = () => addTag(tag);
         suggestionsBox.appendChild(div);
         div.addEventListener("mouseenter", () => {
-          activeSuggestionIndex = -1; // reset keyboard tracking
+          // activeSuggestionIndex = -1; // reset keyboard tracking
           const allItems = suggestionsBox.querySelectorAll(".suggestion-item");
           allItems.forEach((item) => item.classList.remove("active"));
           div.classList.add("active");
@@ -298,6 +300,7 @@ export function setupTagging({
     if (e.key === "Enter") {
       if (enterHandledBySuggestion) {
         enterHandledBySuggestion = false;
+
         return;
       }
 
@@ -322,6 +325,7 @@ export function setupTagging({
         e.preventDefault();
         addTag(newTag);
       }
+      setTimeout(() => input.focus(), 0);
     }
   });
   input.addEventListener("blur", () => {