Fix HMR errors (#5209)

* adding optional chaining checks to aid with hot-module reloading * Add changeset --------- Co-authored-by: Cameron Dutro <[email protected]>
primer · Nov 19, 2024 · 556afbd · 556afbd
1 parent a3fc488
commit 556afbd
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 19 deletions.
diff --git a/.changeset/tidy-turtles-protect.md b/.changeset/tidy-turtles-protect.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Check certain refs for nullishness to address HMR issues in dotcom
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -260,7 +260,9 @@ const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({
   // If the menu anchor is an icon button, we need to label the menu by tooltip that also labelled the anchor.
   const [anchorAriaLabelledby, setAnchorAriaLabelledby] = useState<null | string>(null)
   useEffect(() => {
-    if (anchorRef.current) {
+    // Necessary for HMR reloads
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (anchorRef?.current) {
       const ariaLabelledby = anchorRef.current.getAttribute('aria-labelledby')
       if (ariaLabelledby) {
         setAnchorAriaLabelledby(ariaLabelledby)

diff --git a/packages/react/src/hooks/useMenuInitialFocus.ts b/packages/react/src/hooks/useMenuInitialFocus.ts
@@ -3,8 +3,8 @@ import {iterateFocusableElements} from '@primer/behaviors/utils'
 
 export const useMenuInitialFocus = (
   open: boolean,
-  containerRef: React.RefObject<HTMLElement>,
-  anchorRef: React.RefObject<HTMLElement>,
+  containerRef?: React.RefObject<HTMLElement>,
+  anchorRef?: React.RefObject<HTMLElement>,
 ) => {
   /**
    * We need to pick the first element to focus based on how the menu was opened,
@@ -15,7 +15,7 @@ export const useMenuInitialFocus = (
 
   React.useEffect(
     function inferOpeningKey() {
-      const anchorElement = anchorRef.current
+      const anchorElement = anchorRef?.current
 
       const clickHandler = (event: MouseEvent) => {
         // event.detail === 0 means onClick was fired by Enter/Space key
@@ -46,12 +46,12 @@ export const useMenuInitialFocus = (
    */
   React.useEffect(
     function moveFocusOnOpen() {
-      if (!open || !containerRef.current) return // wait till the menu is open
+      if (!open || !containerRef?.current) return // wait till the menu is open
 
       const iterable = iterateFocusableElements(containerRef.current)
 
       if (openingGesture === 'mouse-click') {
-        if (anchorRef.current) anchorRef.current.focus()
+        if (anchorRef?.current) anchorRef.current.focus()
         else throw new Error('For focus management, please attach anchorRef')
       } else if (openingGesture && ['ArrowDown', 'Space', 'Enter'].includes(openingGesture)) {
         const firstElement = iterable.next().value

diff --git a/packages/react/src/hooks/useMenuKeyboardNavigation.ts b/packages/react/src/hooks/useMenuKeyboardNavigation.ts
@@ -14,9 +14,9 @@ import type {MenuCloseHandler} from '../ActionMenu'
 export const useMenuKeyboardNavigation = (
   open: boolean,
   onClose: MenuCloseHandler | undefined,
-  containerRef: React.RefObject<HTMLElement>,
-  anchorRef: React.RefObject<HTMLElement>,
-  isSubmenu: boolean,
+  containerRef?: React.RefObject<HTMLElement>,
+  anchorRef?: React.RefObject<HTMLElement>,
+  isSubmenu: boolean = false,
 ) => {
   useMenuInitialFocus(open, containerRef, anchorRef)
   useMnemonics(open, containerRef)
@@ -32,12 +32,12 @@ export const useMenuKeyboardNavigation = (
 const useCloseMenuOnTab = (
   open: boolean,
   onClose: MenuCloseHandler | undefined,
-  containerRef: React.RefObject<HTMLElement>,
-  anchorRef: React.RefObject<HTMLElement>,
+  containerRef?: React.RefObject<HTMLElement>,
+  anchorRef?: React.RefObject<HTMLElement>,
 ) => {
   React.useEffect(() => {
-    const container = containerRef.current
-    const anchor = anchorRef.current
+    const container = containerRef?.current
+    const anchor = anchorRef?.current
 
     const handler = (event: KeyboardEvent) => {
       if (open && event.key === 'Tab') onClose?.('tab')
@@ -59,10 +59,10 @@ const useCloseSubmenuOnArrow = (
   open: boolean,
   isSubmenu: boolean,
   onClose: MenuCloseHandler | undefined,
-  containerRef: React.RefObject<HTMLElement>,
+  containerRef?: React.RefObject<HTMLElement>,
 ) => {
   React.useEffect(() => {
-    const container = containerRef.current
+    const container = containerRef?.current
 
     const handler = (event: KeyboardEvent) => {
       if (open && isSubmenu && event.key === 'ArrowLeft') onClose?.('arrow-left')
@@ -81,12 +81,12 @@ const useCloseSubmenuOnArrow = (
  */
 const useMoveFocusToMenuItem = (
   open: boolean,
-  containerRef: React.RefObject<HTMLElement>,
-  anchorRef: React.RefObject<HTMLElement>,
+  containerRef?: React.RefObject<HTMLElement>,
+  anchorRef?: React.RefObject<HTMLElement>,
 ) => {
   React.useEffect(() => {
-    const container = containerRef.current
-    const anchor = anchorRef.current
+    const container = containerRef?.current
+    const anchor = anchorRef?.current
 
     const handler = (event: KeyboardEvent) => {
       if (!open || !container) return