Skip to content

[Menu][Joy] Fix closing of Menu in demos #36917

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
siriwatknp merged 49 commits into from
Jun 20, 2023
Merged

[Menu][Joy] Fix closing of Menu in demos #36917

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
49 commits
Select commit Hold shift + click to select a range
fc79e3b
fix
sai6855 Apr 17, 2023
95a3b23
trigger
sai6855 Apr 17, 2023
d6b1813
fix logic
sai6855 Apr 25, 2023
7b29c33
fix logic
sai6855 Apr 25, 2023
d081c4a
fix mac menu
sai6855 Apr 25, 2023
f305c46
fix types
sai6855 Apr 25, 2023
692fce9
fix types
sai6855 Apr 25, 2023
699bfc9
fix menu composition demos
sai6855 Apr 25, 2023
37c6dba
fix selected menu
sai6855 Apr 25, 2023
f0970f4
fix group menu
sai6855 Apr 25, 2023
f3fcf8c
fix mac menu
sai6855 Apr 25, 2023
1d59654
yarn docs:typescript:formatted
sai6855 Apr 25, 2023
288651d
Merge branch 'master' into menu-docs-fix
sai6855 Apr 25, 2023
61c78d8
trigger
sai6855 Apr 25, 2023
a6c11e0
swapped parameters and accpeted event type to null
sai6855 Apr 28, 2023
8ca53d4
updated types in demos
sai6855 Apr 28, 2023
98b6573
docs:api
sai6855 Apr 28, 2023
cf732ed
update type in mui base
sai6855 Apr 28, 2023
c8babe0
update base docs demos
sai6855 Apr 28, 2023
228f700
update types
sai6855 Apr 28, 2023
b07727f
reuse type
sai6855 Apr 28, 2023
fa0d34d
docs:api
sai6855 Apr 28, 2023
23f7419
update types in joy
sai6855 Apr 28, 2023
b2b811e
update types in joy menu
sai6855 Apr 28, 2023
690b7c4
prettier
sai6855 Apr 28, 2023
ded28bd
fix types in base docs m,enu
sai6855 Apr 28, 2023
b74144c
add focus event type
sai6855 Apr 28, 2023
697eed0
fix type
sai6855 Apr 28, 2023
451cc4b
type chnage
sai6855 Apr 30, 2023
962c848
type chnage
sai6855 Apr 30, 2023
35c4c3e
Merge branch 'master' into menu-docs-fix
sai6855 May 3, 2023
a6d23d8
Merge branch 'master' into menu-docs-fix
sai6855 Jun 14, 2023
f131f7b
intiallogic
sai6855 Jun 14, 2023
db3bb0b
add warning
sai6855 Jun 14, 2023
b597287
docs:typescript
sai6855 Jun 14, 2023
680e8b2
Merge branch 'menu-open' into menu-docs-fix
sai6855 Jun 14, 2023
0b5d5f5
revert old changes
sai6855 Jun 14, 2023
093a6ed
docs api
sai6855 Jun 14, 2023
b071020
fix tests
sai6855 Jun 14, 2023
f31cf61
fix types
sai6855 Jun 15, 2023
38c46a6
fix: id is not propagate to DOM
siriwatknp Jun 15, 2023
61b72a0
add dev env check
sai6855 Jun 15, 2023
e74d169
Merge branch 'menu-docs-fix' of https://github.com/sai6855/material-u…
sai6855 Jun 15, 2023
027787c
fix tests
sai6855 Jun 15, 2023
f30ad68
update all demos onClick
sai6855 Jun 15, 2023
ea5b2fc
update comment
sai6855 Jun 15, 2023
55318a8
add info about id and aria-controls props
sai6855 Jun 15, 2023
eed1e4f
fix error message and add test
siriwatknp Jun 16, 2023
4f14a90
Merge branch 'master' into menu-docs-fix
sai6855 Jun 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions docs/data/joy/components/menu/AppsMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,27 @@ import MenuItem from '@mui/joy/MenuItem';
import Apps from '@mui/icons-material/Apps';

export default function AppsMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const buttonRef = React.useRef(null);
const [open, setOpen] = React.useState(false);

const handleClose = () => {
setAnchorEl(null);
Comment on lines -11 to -17
Copy link
Member

@siriwatknp siriwatknp Jun 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks much simpler 👍.

setOpen(false);
};

return (
<Box>
<IconButton
ref={buttonRef}
id="apps-menu-demo"
aria-label="Applications"
aria-controls={open ? 'apps-menu' : undefined}
aria-controls={'apps-menu'}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
variant="plain"
color="neutral"
onClick={handleClick}
onClick={() => {
setOpen(!open);
}}
sx={{ borderRadius: 40 }}
>
<Apps />
Expand All @@ -35,7 +37,7 @@ export default function AppsMenu() {
id="apps-menu"
variant="solid"
invertedColors
anchorEl={anchorEl}
anchorEl={buttonRef.current}
open={open}
onClose={handleClose}
aria-labelledby="apps-menu-demo"
Expand Down
20 changes: 11 additions & 9 deletions docs/data/joy/components/menu/AppsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,27 @@ import MenuItem from '@mui/joy/MenuItem';
import Apps from '@mui/icons-material/Apps';

export default function AppsMenu() {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const buttonRef = React.useRef(null);
const [open, setOpen] = React.useState(false);

const handleClose = () => {
setAnchorEl(null);
setOpen(false);
};

return (
<Box>
<IconButton
ref={buttonRef}
id="apps-menu-demo"
aria-label="Applications"
aria-controls={open ? 'apps-menu' : undefined}
aria-controls={'apps-menu'}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
variant="plain"
color="neutral"
onClick={handleClick}
onClick={() => {
setOpen(!open);
}}
sx={{ borderRadius: 40 }}
>
<Apps />
Expand All @@ -35,7 +37,7 @@ export default function AppsMenu() {
id="apps-menu"
variant="solid"
invertedColors
anchorEl={anchorEl}
anchorEl={buttonRef.current}
open={open}
onClose={handleClose}
aria-labelledby="apps-menu-demo"
Expand Down
19 changes: 9 additions & 10 deletions docs/data/joy/components/menu/BasicMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,32 @@ import Menu from '@mui/joy/Menu';
import MenuItem from '@mui/joy/MenuItem';

export default function BasicMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);

const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const buttonRef = React.useRef(null);
const [open, setOpen] = React.useState(false);

const handleClose = () => {
setAnchorEl(null);
setOpen(false);
};

return (
<div>
<Button
ref={buttonRef}
id="basic-demo-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-controls={'basic-menu'}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
variant="outlined"
color="neutral"
onClick={handleClick}
onClick={() => {
setOpen(!open);
}}
>
Dashboard
</Button>
<Menu
id="basic-menu"
anchorEl={anchorEl}
anchorEl={buttonRef.current}
open={open}
onClose={handleClose}
aria-labelledby="basic-demo-button"
Expand Down
19 changes: 9 additions & 10 deletions docs/data/joy/components/menu/BasicMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,32 @@ import Menu from '@mui/joy/Menu';
import MenuItem from '@mui/joy/MenuItem';

export default function BasicMenu() {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const buttonRef = React.useRef(null);
const [open, setOpen] = React.useState(false);

const handleClose = () => {
setAnchorEl(null);
setOpen(false);
};

return (
<div>
<Button
ref={buttonRef}
id="basic-demo-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-controls={'basic-menu'}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
variant="outlined"
color="neutral"
onClick={handleClick}
onClick={() => {
setOpen(!open);
}}
>
Dashboard
</Button>
<Menu
id="basic-menu"
anchorEl={anchorEl}
anchorEl={buttonRef.current}
open={open}
onClose={handleClose}
aria-labelledby="basic-demo-button"
Expand Down
19 changes: 10 additions & 9 deletions docs/data/joy/components/menu/GroupMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,33 @@ import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
export default function BasicMenu() {
const SIZES = ['X-Small', 'Small', 'Medium', 'Large', 'X-Large'];
const [size, setSize] = React.useState('Medium');
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const buttonRef = React.useRef(null);
const [open, setOpen] = React.useState(false);

const handleClose = () => {
setAnchorEl(null);
setOpen(false);
};

return (
<div>
<Button
ref={buttonRef}
id="group-demo-button"
aria-controls={open ? 'group-menu' : undefined}
aria-controls={'group-menu'}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
variant="outlined"
color="neutral"
onClick={handleClick}
onClick={() => {
setOpen(!open);
}}
endDecorator={<ArrowDropDown />}
>
Size
</Button>
<Menu
id="group-menu"
anchorEl={anchorEl}
anchorEl={buttonRef.current}
open={open}
onClose={handleClose}
aria-labelledby="group-demo-button"
Expand Down
19 changes: 10 additions & 9 deletions docs/data/joy/components/menu/GroupMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,33 @@ import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
export default function BasicMenu() {
const SIZES = ['X-Small', 'Small', 'Medium', 'Large', 'X-Large'];
const [size, setSize] = React.useState('Medium');
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const buttonRef = React.useRef(null);
const [open, setOpen] = React.useState(false);

const handleClose = () => {
setAnchorEl(null);
setOpen(false);
};

return (
<div>
<Button
ref={buttonRef}
id="group-demo-button"
aria-controls={open ? 'group-menu' : undefined}
aria-controls={'group-menu'}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
variant="outlined"
color="neutral"
onClick={handleClick}
onClick={() => {
setOpen(!open);
}}
endDecorator={<ArrowDropDown />}
>
Size
</Button>
<Menu
id="group-menu"
anchorEl={anchorEl}
anchorEl={buttonRef.current}
open={open}
onClose={handleClose}
aria-labelledby="group-demo-button"
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/menu/MenuIconSideNavExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ function MenuButton({ children, menu, open, onOpen, onLeaveMenu, label, ...props
color="neutral"
aria-haspopup="menu"
aria-expanded={open ? 'true' : undefined}
aria-controls={open ? `nav-example-menu-${label}` : undefined}
aria-controls={`nav-example-menu-${label}`}
onMouseDown={() => {
internalOpen.current = open;
}}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/menu/MenuIconSideNavExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function MenuButton({
color="neutral"
aria-haspopup="menu"
aria-expanded={open ? 'true' : undefined}
aria-controls={open ? `nav-example-menu-${label}` : undefined}
aria-controls={`nav-example-menu-${label}`}
onMouseDown={() => {
internalOpen.current = open;
}}
Expand Down
27 changes: 15 additions & 12 deletions docs/data/joy/components/menu/MenuListComposition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,34 +11,37 @@ const Popup = styled(Popper)({
});

export default function MenuListComposition() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const buttonRef = React.useRef(null);
const [open, setOpen] = React.useState(false);

const handleClose = () => {
setAnchorEl(null);
setOpen(false);
};

const handleListKeyDown = (event) => {
if (event.key === 'Tab') {
setAnchorEl(null);
setOpen(false);
} else if (event.key === 'Escape') {
anchorEl?.focus();
setAnchorEl(null);
if (buttonRef.current) {
buttonRef.current?.focus();
}
setOpen(false);
}
};

return (
<div>
<Button
ref={buttonRef}
id="composition-button"
aria-controls={open ? 'composition-menu' : undefined}
aria-controls={'composition-menu'}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
variant="outlined"
color="neutral"
onClick={handleClick}
onClick={() => {
setOpen(!open);
}}
sx={{ borderRadius: 0 }}
>
Open menu
Expand All @@ -47,7 +50,7 @@ export default function MenuListComposition() {
role={undefined}
id="composition-menu"
open={open}
anchorEl={anchorEl}
anchorEl={buttonRef.current}
disablePortal
modifiers={[
{
Expand Down
27 changes: 15 additions & 12 deletions docs/data/joy/components/menu/MenuListComposition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,34 +11,37 @@ const Popup = styled(Popper)({
});

export default function MenuListComposition(): JSX.Element {
const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const buttonRef = React.useRef<HTMLButtonElement | null>(null);
const [open, setOpen] = React.useState(false);

const handleClose = () => {
setAnchorEl(null);
setOpen(false);
};

const handleListKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
if (event.key === 'Tab') {
setAnchorEl(null);
setOpen(false);
} else if (event.key === 'Escape') {
anchorEl?.focus();
setAnchorEl(null);
if (buttonRef.current) {
buttonRef.current?.focus();
}
setOpen(false);
}
};

return (
<div>
<Button
ref={buttonRef}
id="composition-button"
aria-controls={open ? 'composition-menu' : undefined}
aria-controls={'composition-menu'}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
variant="outlined"
color="neutral"
onClick={handleClick}
onClick={() => {
setOpen(!open);
}}
sx={{ borderRadius: 0 }}
>
Open menu
Expand All @@ -47,7 +50,7 @@ export default function MenuListComposition(): JSX.Element {
role={undefined}
id="composition-menu"
open={open}
anchorEl={anchorEl}
anchorEl={buttonRef.current}
disablePortal
modifiers={[
{
Expand Down
Loading