Clear last focused state on the labels in the selector

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)
       }}
     >

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(), '')

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(() => {