fix(CFocusTrap): add support for element.ref and element.props.ref to support both React 18 and 19

Author: mrholek

packages/coreui-react/src/components/focus-trap/CFocusTrap.tsx

@@ -1,5 +1,5 @@
-import React, { FC, ReactElement, cloneElement, useEffect, useRef } from 'react'
-import { mergeRefs, focusableChildren } from './utils'
+import React, { FC, ReactElement, cloneElement, use, useEffect, useRef } from 'react'
+import { mergeRefs, focusableChildren, getChildRef } from './utils'
 
 export interface CFocusTrapProps {
   /**
@@ -146,7 +146,10 @@ export const CFocusTrap: FC<CFocusTrapProps> = ({
 
       if (elements.length === 0) {
         container.focus({ preventScroll: true })
-      } else if (lastTabNavDirectionRef.current === 'backward') {
+        return
+      }
+
+      if (lastTabNavDirectionRef.current === 'backward') {
         elements.at(-1)?.focus({ preventScroll: true })
       } else {
         elements[0].focus({ preventScroll: true })
@@ -161,20 +164,37 @@ export const CFocusTrap: FC<CFocusTrapProps> = ({
       tabEventSourceRef.current = container
       lastTabNavDirectionRef.current = event.shiftKey ? 'backward' : 'forward'
 
-      if (!_additionalContainer) {
-        return
-      }
-
       const containerElements = focusableChildren(container)
-      const additionalElements = focusableChildren(_additionalContainer)
+      const additionalElements = _additionalContainer ? focusableChildren(_additionalContainer) : []
 
       if (containerElements.length === 0 && additionalElements.length === 0) {
         // No focusable elements, prevent tab
         event.preventDefault()
         return
       }
 
+      const focusableElements = [...containerElements, ...additionalElements]
+
+      const firstFocusableElement = focusableElements[0] as HTMLElement
+      const lastFocusableElement = focusableElements.at(-1) as HTMLElement
       const activeElement = document.activeElement as HTMLElement
+
+      if (event.shiftKey && activeElement === firstFocusableElement) {
+        event.preventDefault()
+        lastFocusableElement.focus()
+        return
+      }
+
+      if (!event.shiftKey && activeElement === lastFocusableElement) {
+        event.preventDefault()
+        firstFocusableElement.focus()
+        return
+      }
+
+      if (!_additionalContainer) {
+        return
+      }
+
       const isInContainer = containerElements.includes(activeElement)
       const isInAdditional = additionalElements.includes(activeElement)
 
@@ -245,7 +265,12 @@ export const CFocusTrap: FC<CFocusTrapProps> = ({
 
   // Attach our ref to the ONLY child — no extra wrappers
   const onlyChild = React.Children.only(children)
-  const childRef = (onlyChild as React.ReactElement & { ref?: React.Ref<HTMLElement> }).ref
+
+  // Handle different ref access patterns between React versions
+  // React 19+: ref is accessed via element.props.ref
+  // React 18 and earlier: ref is accessed via element.ref
+  const childRef: React.Ref<HTMLElement> | undefined = getChildRef(onlyChild)
+
   const mergedRef = mergeRefs(childRef, (node: HTMLElement | null) => {
     containerRef.current = node
   })

packages/coreui-react/src/components/focus-trap/utils.ts

@@ -23,6 +23,30 @@ export const focusableChildren = (element: HTMLElement): HTMLElement[] => {
   return elements.filter((el) => !isDisabled(el) && isVisible(el))
 }
 
+/**
+ * Extracts the ref from a React element, handling version differences between React 18 and 19+.
+ *
+ * In React 18 and earlier, refs are stored directly on the element object.
+ * In React 19+, refs are stored in the element's props object due to changes in React's internals.
+ * This function automatically detects the React version and uses the appropriate access pattern.
+ * @param child - The React element to extract the ref from
+ * @returns The ref attached to the element, or undefined if no ref is present
+ */
+export const getChildRef = (child: React.ReactElement): React.Ref<HTMLElement> | undefined => {
+  const major = Number(React.version?.split?.('.')[0] ?? 18)
+  // React 18 stores ref directly on the element
+  if (major <= 18 && 'ref' in child && child.ref !== undefined) {
+    return (child as React.ReactElement & { ref?: React.Ref<HTMLElement> }).ref
+  }
+
+  // React 19 stores ref in props
+  if (child.props && typeof child.props === 'object' && 'ref' in child.props) {
+    return (child.props as { ref?: React.Ref<HTMLElement> }).ref
+  }
+
+  return undefined
+}
+
 /**
  * Checks if an element is disabled.
  * Considers various ways an element can be disabled including CSS classes and attributes.