Merge pull request #66 from i-like-robots/focus-root

Switch cursor focus to root after removing a tag with focus

src/components/ReactTags.tsx

@@ -153,6 +153,7 @@ function ReactTags(
   const comboBoxRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const listBoxRef = useRef<HTMLDivElement>(null)
+  const rootRef = useRef<HTMLDivElement>(null)
 
   const managerRef = useManager({
     activateFirstOption,
@@ -194,6 +195,7 @@ function ReactTags(
         isInvalid,
         listBoxRef,
         managerRef,
+        rootRef,
       }}
     >
       <Root onBlur={onBlur} onFocus={onFocus} render={renderRoot}>

src/contexts/GlobalContext.ts

@@ -11,6 +11,7 @@ export type GlobalContextValue = {
   isInvalid: boolean
   listBoxRef: React.MutableRefObject<HTMLDivElement | null>
   managerRef: React.MutableRefObject<UseManagerState>
+  rootRef: React.MutableRefObject<HTMLDivElement | null>
 }
 
 export const GlobalContext = React.createContext<GlobalContextValue | undefined>(undefined)

src/hooks/useRoot.ts

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useRef, useState } from 'react'
+import React, { useContext, useMemo, useState } from 'react'
 import { GlobalContext } from '../contexts'
 import { labelId, rootId } from '../lib'
 import type { OnBlur, OnFocus } from '../sharedTypes'
@@ -15,8 +15,7 @@ export type UseRootState = {
 
 export function useRoot({ onBlur, onFocus }: UseRootArgs): UseRootState {
   const [isActive, setIsActive] = useState<boolean>(false)
-  const { id, inputRef } = useContext(GlobalContext)
-  const rootRef = useRef<HTMLDivElement>(null)
+  const { id, inputRef, rootRef } = useContext(GlobalContext)
 
   const rootProps = useMemo(() => {
     return {

src/hooks/useTagList.ts

@@ -8,22 +8,22 @@ export type UseTagListState = {
 }
 
 export function useTagList(): UseTagListState {
-  const { inputRef, managerRef } = useContext(GlobalContext)
+  const { rootRef, managerRef } = useContext(GlobalContext)
 
   const listRef = useRef<HTMLUListElement>()
 
-  const tagDeleted = managerRef.current.flags.tagsDeleted.length
+  const tagDeleted = managerRef.current.flags.tagsDeleted[0]
   const isFocusInList = listRef.current?.contains(document.activeElement)
 
   useLayoutEffect(() => {
     if (tagDeleted) {
       const isFocusInListNow = listRef.current?.contains(document.activeElement)
 
       if (isFocusInList && !isFocusInListNow) {
-        inputRef.current?.focus({ preventScroll: true })
+        rootRef.current?.focus({ preventScroll: true })
       }
     }
-  }, [inputRef, isFocusInList, listRef, tagDeleted])
+  }, [isFocusInList, listRef, rootRef, tagDeleted])
 
   return { listRef }
 }

src/test/ReactTags.test.tsx

@@ -80,7 +80,7 @@ describe('React Tags Autocomplete', () => {
 
       harness.rerender({ selected: harness.props.selected.slice(1) })
 
-      expect(document.activeElement).toBe(harness.input)
+      expect(document.activeElement).toBe(harness.root)
     })
   })