move disableInitialContentFocus prop to Modal

docs/pages/material-ui/api/modal.json

@@ -35,6 +35,7 @@
     "disableAutoFocus": { "type": { "name": "bool" }, "default": "false" },
     "disableEnforceFocus": { "type": { "name": "bool" }, "default": "false" },
     "disableEscapeKeyDown": { "type": { "name": "bool" }, "default": "false" },
+    "disableInitialContentFocus": { "type": { "name": "bool" }, "default": "false" },
     "disablePortal": { "type": { "name": "bool" }, "default": "false" },
     "disableRestoreFocus": { "type": { "name": "bool" }, "default": "false" },
     "disableScrollLock": { "type": { "name": "bool" }, "default": "false" },

docs/pages/material-ui/api/popover.json

@@ -34,6 +34,7 @@
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
+    "disableInitialContentFocus": { "type": { "name": "bool" }, "default": "false" },
     "disableScrollLock": { "type": { "name": "bool" }, "default": "false" },
     "elevation": { "type": { "name": "custom", "description": "integer" }, "default": "8" },
     "marginThreshold": { "type": { "name": "number" }, "default": "16" },

docs/translations/api-docs/modal/modal.json

@@ -31,6 +31,9 @@
     "disableEscapeKeyDown": {
       "description": "If <code>true</code>, hitting escape will not fire the <code>onClose</code> callback."
     },
+    "disableInitialContentFocus": {
+      "description": "By default the dialog content element is focused when opened.<br>Set the property to <code>true</code> to disable this behavior and focus will be placed on the first focusable element respecting <code>tabIndex</code> order, including elements explicitly marked with <code>tabIndex={-1}</code>."
+    },
     "disablePortal": {
       "description": "The <code>children</code> will be under the DOM hierarchy of the parent component."
     },

docs/translations/api-docs/popover/popover.json

@@ -27,6 +27,9 @@
     "container": {
       "description": "An HTML element, component instance, or function that returns either. The <code>container</code> will passed to the Modal component.<br>By default, it uses the body of the anchorEl&#39;s top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
     },
+    "disableInitialContentFocus": {
+      "description": "By default the dialog content element is focused when opened.<br>Set the property to <code>true</code> to disable this behavior and focus will be placed on the first focusable element respecting <code>tabIndex</code> order, including elements explicitly marked with <code>tabIndex={-1}</code>."
+    },
     "disableScrollLock": { "description": "Disable the scroll lock behavior." },
     "elevation": { "description": "The elevation of the popover." },
     "marginThreshold": {

packages/mui-material/src/Dialog/Dialog.d.ts

@@ -34,16 +34,6 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
    * @default false
    */
   disableEscapeKeyDown?: boolean;
-  /**
-   * By default the dialog content element is focused when opened.
-   *
-   * Set the property to `true` to disable this behavior and focus will be
-   * placed on the first focusable element respecting `tabIndex` order,
-   * including elements explicitly marked with `tabIndex={-1}`.
-   *
-   * @default false
-   */
-  disableInitialContentFocus?: boolean;
   /**
    * If `true`, the dialog is full-screen.
    * @default false

packages/mui-material/src/Drawer/Drawer.js

@@ -201,7 +201,11 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     className,
     elevation = 16,
     hideBackdrop = false,
-    ModalProps: { BackdropProps: BackdropPropsProp, ...ModalProps } = {},
+    ModalProps: {
+      BackdropProps: BackdropPropsProp,
+      disableInitialContentFocus = false,
+      ...ModalProps
+    } = {},
     onClose,
     open = false,
     PaperProps = {},
@@ -239,7 +243,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
     <DrawerPaper
       elevation={variant === 'temporary' ? elevation : 0}
       square
-      tabIndex={ModalProps.disableInitialContentFocus ? undefined : -1}
+      tabIndex={disableInitialContentFocus ? undefined : -1}
       {...PaperProps}
       className={clsx(classes.paper, PaperProps.className)}
       ownerState={ownerState}

packages/mui-material/src/Modal/Modal.d.ts

@@ -121,6 +121,16 @@ export interface ModalOwnProps {
    * @default false
    */
   disableEscapeKeyDown?: boolean;
+  /**
+   * By default the dialog content element is focused when opened.
+   *
+   * Set the property to `true` to disable this behavior and focus will be
+   * placed on the first focusable element respecting `tabIndex` order,
+   * including elements explicitly marked with `tabIndex={-1}`.
+   *
+   * @default false
+   */
+  disableInitialContentFocus?: boolean;
   /**
    * The `children` will be under the DOM hierarchy of the parent component.
    * @default false

packages/mui-material/src/Modal/Modal.js

@@ -335,6 +335,16 @@ Modal.propTypes /* remove-proptypes */ = {
    * @default false
    */
   disableEscapeKeyDown: PropTypes.bool,
+  /**
+   * By default the dialog content element is focused when opened.
+   *
+   * Set the property to `true` to disable this behavior and focus will be
+   * placed on the first focusable element respecting `tabIndex` order,
+   * including elements explicitly marked with `tabIndex={-1}`.
+   *
+   * @default false
+   */
+  disableInitialContentFocus: PropTypes.bool,
   /**
    * The `children` will be under the DOM hierarchy of the parent component.
    * @default false

packages/mui-material/src/Popover/Popover.js

@@ -108,6 +108,8 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
     children,
     className,
     container: containerProp,
+    disableScrollLock = false,
+    disableInitialContentFocus = false,
     elevation = 8,
     marginThreshold = 16,
     open,
@@ -121,7 +123,6 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
     TransitionComponent = Grow,
     transitionDuration: transitionDurationProp = 'auto',
     TransitionProps: { onEntering, ...TransitionProps } = {},
-    disableScrollLock = false,
     ...other
   } = props;
 
@@ -428,7 +429,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
       >
         <PaperSlot
           {...paperProps}
-          tabIndex={other.disableInitialContentFocus ? undefined : -1}
+          tabIndex={disableInitialContentFocus ? undefined : -1}
           ref={handlePaperRef}
         >
           {children}
@@ -565,6 +566,16 @@ Popover.propTypes /* remove-proptypes */ = {
     HTMLElementType,
     PropTypes.func,
   ]),
+  /**
+   * By default the dialog content element is focused when opened.
+   *
+   * Set the property to `true` to disable this behavior and focus will be
+   * placed on the first focusable element respecting `tabIndex` order,
+   * including elements explicitly marked with `tabIndex={-1}`.
+   *
+   * @default false
+   */
+  disableInitialContentFocus: PropTypes.bool,
   /**
    * Disable the scroll lock behavior.
    * @default false