getInertValue

mui · Sep 20, 2024 · e1403e9 · e1403e9
1 parent 26c88a1
commit e1403e9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/packages/mui-base/src/Checkbox/Root/useCheckboxRoot.ts b/packages/mui-base/src/Checkbox/Root/useCheckboxRoot.ts
@@ -10,7 +10,7 @@ import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useFieldRootContext } from '../../Field/Root/FieldRootContext';
 import { useFieldControlValidation } from '../../Field/Control/useFieldControlValidation';
 import { useField } from '../../Field/useField';
-import { isReactVersionAtLeast } from '../../utils/reactVersion';
+import { getInertValue } from '../../utils/getInertValue';
 
 export function useCheckboxRoot(params: UseCheckboxRoot.Parameters): UseCheckboxRoot.ReturnValue {
   const {
@@ -127,7 +127,7 @@ export function useCheckboxRoot(params: UseCheckboxRoot.Parameters): UseCheckbox
         type: 'checkbox',
         'aria-hidden': true,
         // @ts-ignore
-        inert: isReactVersionAtLeast(19) ? true : 'true',
+        inert: getInertValue(true),
         onChange(event) {
           // Workaround for https://github.com/facebook/react/issues/9023
           if (event.nativeEvent.defaultPrevented) {

diff --git a/packages/mui-base/src/Menu/Positioner/useMenuPositioner.ts b/packages/mui-base/src/Menu/Positioner/useMenuPositioner.ts
@@ -11,6 +11,7 @@ import type {
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useAnchorPositioning } from '../../utils/useAnchorPositioning';
 import type { GenericHTMLProps } from '../../utils/types';
+import { getInertValue } from '../../utils/getInertValue';
 
 export function useMenuPositioner(
   params: useMenuPositioner.Parameters,
@@ -43,7 +44,7 @@ export function useMenuPositioner(
           zIndex: 2147483647, // max z-index
         },
         'aria-hidden': !open || undefined,
-        inert: !open ? '' : undefined,
+        inert: getInertValue(!open),
       });
     },
     [positionerStyles, open, keepMounted, hidden],

diff --git a/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx b/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx
@@ -9,6 +9,7 @@ import type {
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useAnchorPositioning } from '../../utils/useAnchorPositioning';
 import type { GenericHTMLProps } from '../../utils/types';
+import { getInertValue } from '../../utils/getInertValue';
 
 export function usePopoverPositioner(
   params: usePopoverPositioner.Parameters,
@@ -38,7 +39,7 @@ export function usePopoverPositioner(
         return mergeReactProps<'div'>(externalProps, {
           role: 'presentation',
           // @ts-ignore
-          inert: open ? undefined : 'true',
+          inert: getInertValue(open),
           style: {
             ...positionerStyles,
             ...hiddenStyles,

diff --git a/packages/mui-base/src/utils/getInertValue.ts b/packages/mui-base/src/utils/getInertValue.ts
@@ -0,0 +1,13 @@
+import { isReactVersionAtLeast } from './reactVersion';
+
+/**
+ * Return the inert attribute taking into consideration the React version.
+ * React 19 changed the inert attribute from a string to a boolean.
+ */
+export function getInertValue(value: boolean): any | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  return isReactVersionAtLeast(19) ? true : 'true';
+}