Merge pull request #471 from amitdhiman5086/Amit-Dhiman_CU-86b7uze02_Fix-issue-with-adding-negative-z-index-while-adding-in-manual-classes

fix: allow Enter key to add classes regardless of suggestions and remove highlight

Author: surajair

src/core/components/settings/new-panel/manual-classes.tsx

@@ -161,9 +161,21 @@ export function ManualClasses() {
         }, 0);
       },
       onKeyDown: (e: any) => {
-        if (e.key === "Enter" && newCls.trim() !== "" && suggestions.length === 0) {
+        if (e.key === "Enter" && newCls.trim() !== "") {
+          e.preventDefault();
           addNewClasses();
         }
+        if (e.key === "Tab" && suggestions.length > 0) {
+          e.preventDefault();
+          // Simulate ArrowDown to highlight
+          const downEvent = new KeyboardEvent("keydown", {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            bubbles: true,
+          });
+          e.target.dispatchEvent(downEvent);
+        }
       },
       onChange: (_e: any, { newValue }: any) => setNewCls(newValue),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1",
@@ -225,7 +237,6 @@ export function ManualClasses() {
             getSuggestionValue={getSuggestionValue}
             renderSuggestion={renderSuggestion}
             inputProps={inputProps}
-            highlightFirstSuggestion={true}
             onSuggestionSelected={(_e, { suggestionValue }) => {
               const storageFormat = convertToStorageFormat(suggestionValue);
               addClassesToBlocks(selectedIds, [storageFormat], true);