Refactor root ref into global context

i-like-robots · Feb 14, 2024 · 3998dbf · 3998dbf
1 parent d0798c9
commit 3998dbf
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/src/components/ReactTags.tsx b/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}>

diff --git a/src/contexts/GlobalContext.ts b/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)
diff --git a/src/hooks/useRoot.ts b/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 {