From 103e676c7d753fee52c0d15cc2ac1c667fd8b3f6 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 20 Jun 2023 10:28:15 +0800
Subject: [PATCH] Clear last focused state on the labels in the selector

---
 packages/web/components/elements/LabelsPicker.tsx |  2 ++
 .../templates/article/SetLabelsControl.tsx        | 15 ++++++++++-----
 .../templates/article/SetLabelsModal.tsx          |  4 ++++
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/web/components/elements/LabelsPicker.tsx b/packages/web/components/elements/LabelsPicker.tsx
index 7f6b6548d..c0d973cec 100644
--- a/packages/web/components/elements/LabelsPicker.tsx
+++ b/packages/web/components/elements/LabelsPicker.tsx
@@ -118,6 +118,7 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
       }}
       onMouseDown={(event) => {
         inputRef.current?.focus()
+        props.setHighlightLastLabel(false)
         inputRef.current?.setSelectionRange(
           inputRef.current?.value.length,
           inputRef.current?.value.length
@@ -126,6 +127,7 @@ export const LabelsPicker = (props: LabelsPickerProps): JSX.Element => {
       }}
       onDoubleClick={(event) => {
         inputRef.current?.focus()
+        props.setHighlightLastLabel(false)
         inputRef.current?.setSelectionRange(0, inputRef.current?.value.length)
       }}
     >
diff --git a/packages/web/components/templates/article/SetLabelsControl.tsx b/packages/web/components/templates/article/SetLabelsControl.tsx
index 1e03fb872..621fbfc82 100644
--- a/packages/web/components/templates/article/SetLabelsControl.tsx
+++ b/packages/web/components/templates/article/SetLabelsControl.tsx
@@ -264,6 +264,10 @@ function Footer(props: FooterProps): JSX.Element {
 export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
   const router = useRouter()
   const { labels, revalidate } = useGetLabelsQuery()
+  // Move focus through the labels list on tab or arrow up/down keys
+  const [focusedIndex, setFocusedIndex] = useState<number | undefined>(
+    undefined
+  )
 
   useEffect(() => {
     setFocusedIndex(undefined)
@@ -278,6 +282,12 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
     [props.selectedLabels]
   )
 
+  useEffect(() => {
+    if (focusedIndex === 0) {
+      props.setHighlightLastLabel(false)
+    }
+  }, [focusedIndex])
+
   const toggleLabel = useCallback(
     async (label: Label) => {
       let newSelectedLabels = [...props.selectedLabels]
@@ -314,11 +324,6 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
       })
   }, [labels, props.inputValue])
 
-  // Move focus through the labels list on tab or arrow up/down keys
-  const [focusedIndex, setFocusedIndex] = useState<number | undefined>(
-    undefined
-  )
-
   const createLabelFromFilterText = useCallback(
     async (text: string) => {
       const label = await createLabelMutation(text, randomLabelColorHex(), '')
diff --git a/packages/web/components/templates/article/SetLabelsModal.tsx b/packages/web/components/templates/article/SetLabelsModal.tsx
index 4f6ff5e2f..50401afef 100644
--- a/packages/web/components/templates/article/SetLabelsModal.tsx
+++ b/packages/web/components/templates/article/SetLabelsModal.tsx
@@ -79,6 +79,10 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
     } else if (errorMessage === maxLengthMessage) {
       setErrorMessage(undefined)
     }
+
+    if (inputValue.length > 0) {
+      setHighlightLastLabel(false)
+    }
   }, [inputValue, showMessage])
 
   const clearInputState = useCallback(() => {