MenuItem + Component - Tab key does not work when dialog opened via MenuItem

Using the Menu and MenuItem components. The MenuItem provides a “component” property which is used to open a dialog. The dialog opens fine, but the tab keys do not work.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The dialog appears and I can click into fields, but the tab key does not navigate through active controls / form elements – both within the opened dialog and without.

Expected Behavior 🤔

Steps to Reproduce 🕹

The tab key to navigate through tabable elements.

Apologies, couldn’t get things to work in sandbox (never used it).

dialog_test.tsx:

import React, { } from 'react';
import TestDialog from './test_dialog';

import { ArrowDropDown } from '@material-ui/icons';

import {
    Button,
    Menu,
    MenuItem,
} from '@material-ui/core';


export const DialogTest = (props) => {

    const [menuEl, setMenuEl] = React.useState(null);

    const handleClick = (event) => {
        setMenuEl(event.currentTarget);
    };

    const handleClose = () => {
        setMenuEl(null);
    };

    return (
        <>
            <Button
                data-testid={'actionMenu'}
                disabled={false}
                onClick={handleClick}
                size={'medium'}
                variant={'contained'}
            >
                <span>Show Menu</span>
                <ArrowDropDown />
            </Button>

            <Menu
                anchorEl={menuEl}
                open={Boolean(menuEl)}
                keepMounted
                onClose={handleClose}
                getContentAnchorEl={null}
                autoFocus={false}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'left'
                }}
            >
                <MenuItem
                    children='PRQS MM - Environment'
                    component={TestDialog}
                    button={true}
                    onClick={handleClose}
                />
            </Menu>
        </>
    )
}


export default DialogTest;

test_dialog.tsx:

import React, { forwardRef } from 'react';

import {
    Button,
    Dialog,
    DialogActions,
    DialogContent,
    DialogTitle,
    FormControl,
    InputLabel,
    TextField,
} from '@material-ui/core';

export const TestDialog = forwardRef((props:any, ref) => {

    const [open, setOpen] = React.useState(false);

    const handleClick = (event) => {
        setOpen(true);
    };
    
    const handleClose = () => {
        setOpen(false);
    };

    return (
        <>
            <li onClick={handleClick} {...props}>
               <div onClick={handleClick}>{props.children}</div>
            </li>
            <Dialog open={open} onClose={handleClick} maxWidth="lg" fullWidth={true}>
                <DialogTitle>
                    PRQS MM - {props['data-action-type']}
                     <div onclick={handleClose}>X</div>
                </DialogTitle>
                <DialogContent>
                    <FormControl variant="filled" fullWidth style={{marginTop: "25px"}}>
                        <InputLabel>
                            Text1:
                        </InputLabel>
                        <TextField
                            id="text1"
                            name="text1"
                            value={'text 1 input'}
                        />
                    </FormControl>
                    <br />
                    <br />
                    <br />
                    <FormControl variant="filled" fullWidth>
                        <InputLabel>
                            Text2:
                        </InputLabel>
                        <TextField
                            id="text2"
                            name="text2"
                            value={'text 1 input'}
                        />
                    </FormControl>
                </DialogContent>
                <DialogActions disableSpacing={false} color={'inherit'}>
                    <Button onClick={handleClose} variant={'outlined'}>
                        Close
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    )    
})

export default TestDialog;

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.9.2
React	16.12.0
Browser	MacBook Chrome
TypeScript	3.7.5
etc.

[snodgrass23]

It would be pretty easy for the library to simply add something like a boolean prop to disable this capturing of the tab key. Our issue is that it breaks a form’s accessibility when using this menu component to open the form. Is there any chance of this being added?

[oliviertassinari]

@georgiosd It was closed as “won’t fix” because it seemed to be an edge case not worth supporting. The current solution is to render the Dialog outside of the React tree structure of the Menu.

In X, we took a different tradeoff with https://github.com/mui-org/material-ui-x/pull/1324