setting selectedIndex to -1 when moving down or up at the suggestion …

evosus · Jul 10, 2024 · 3d7bc8e · 3d7bc8e
1 parent 039fb8f
commit 3d7bc8e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/example/main.js b/example/main.js
@@ -296,7 +296,7 @@ const App = () => {
           handleTagClick={handleTagClick}
           handleNotesClick={handleNotesClick}
           onTagUpdate={onTagUpdate}
-          showWorkflowButton={true}
+          // showWorkflowButton={true}
           handleWorkflowButtonClick={handleWorkflowButtonClick}
           showHistoryButton={true}
           showShowAllButton={true}
@@ -307,8 +307,8 @@ const App = () => {
           inputFieldPosition="bottom"
           useWorkflowButtonIcon={true}
           maxTags={2}
-          autocomplete
-          editable
+          // autocomplete
+          // editable
           clearAll
           onClearAll={onClearAll}
           tagLimit={2}

diff --git a/src/components/ReactTags.js b/src/components/ReactTags.js
@@ -373,23 +373,37 @@ class ReactTags extends Component {
     // up arrow
     if (e.keyCode === KEYS.UP_ARROW) {
       e.preventDefault();
-      this.setState({
-        selectedIndex:
-          selectedIndex <= 0 ? suggestions.length - 1 : selectedIndex - 1,
-        selectionMode: true,
-      });
+      if (selectedIndex === 0) {
+        this.setState({
+          selectedIndex: -1,
+          selectionMode: false,
+        });
+      } else {
+        this.setState({
+          selectedIndex:
+            selectedIndex <= 0 ? suggestions.length - 1 : selectedIndex - 1,
+          selectionMode: true,
+        });
+      }
     }
 
     // down arrow
     if (e.keyCode === KEYS.DOWN_ARROW) {
       e.preventDefault();
-      this.setState({
-        selectedIndex:
-          suggestions.length === 0
-            ? -1
-            : (selectedIndex + 1) % suggestions.length,
-        selectionMode: true,
-      });
+      if (selectedIndex === suggestions.length - 1) {
+        this.setState({
+          selectedIndex: -1,
+          selectionMode: false,
+        });
+      } else {
+        this.setState({
+          selectedIndex:
+            suggestions.length === 0
+              ? -1
+              : (selectedIndex + 1) % suggestions.length,
+          selectionMode: true,
+        });
+      }
     }
   }