Skip to content
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.

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

[Dialog] Modality changes #977

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

michaldudak
Copy link
Member

@michaldudak michaldudak commented Dec 6, 2024

  • added the reason parameter to Dialog's onOpenChange
  • trapping keyboard focus regardless of the modal prop value

part of #623

@michaldudak michaldudak added component: alert dialog This is the name of the generic UI component, not the React module! component: dialog This is the name of the generic UI component, not the React module! labels Dec 6, 2024
@michaldudak michaldudak changed the title Dialog modality changes [Dialog] Modality changes Dec 6, 2024
@mui-bot
Copy link

mui-bot commented Dec 6, 2024

Netlify deploy preview

https://deploy-preview-977--base-ui.netlify.app/

Generated by 🚫 dangerJS against 57ff8d0

@michaldudak michaldudak force-pushed the dialog-modality-changes branch from 9d83eb5 to bb66879 Compare December 6, 2024 13:38
@github-actions github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Dec 6, 2024
@michaldudak michaldudak force-pushed the dialog-modality-changes branch from 16a17bb to 9a01a54 Compare December 9, 2024 04:33
@michaldudak michaldudak marked this pull request as ready for review December 9, 2024 04:53
@colmtuite colmtuite requested a review from vladmoroz December 9, 2024 20:12
@colmtuite colmtuite added this to the 1.0.0-alpha.1 release milestone Dec 9, 2024
Comment on lines 8 to 15
const handleClick = React.useCallback(
(event: React.MouseEvent) => {
if (open) {
setOpen(false, event.nativeEvent, 'click');
}
},
[open, setOpen],
);
Copy link
Contributor

Choose a reason for hiding this comment

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

useEventCallback

Copy link
Member Author

Choose a reason for hiding this comment

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

Same here - setOpen doesn't change between renders.

Comment on lines 39 to 44
const handleFloatingUIOpenChange = React.useCallback(
(isOpen: boolean, event: Event | undefined, reason: FloatingUIOpenChangeReason | undefined) => {
setOpen(isOpen, event, translateOpenChangeReason(reason));
},
[setOpen],
);
Copy link
Contributor

Choose a reason for hiding this comment

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

useEventCallback

Copy link
Member Author

Choose a reason for hiding this comment

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

This depends on setOpen only, which is stable.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, but you need to specify the deps needlessly, plus for consistency it's good to wrap event handlers in it since it's used elsewhere

Comment on lines 67 to 76
const handleFloatingUIOpenChange = React.useCallback(
(
nextOpen: boolean,
event: Event | undefined,
reason: FloatingUIOpenChangeReason | undefined,
) => {
setOpen(nextOpen, event, translateOpenChangeReason(reason));
},
[setOpen],
);
Copy link
Contributor

Choose a reason for hiding this comment

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

Another here, though this one (and the one above) actually doesn't need to be wrapped, since it's done internally already

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 11, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: alert dialog This is the name of the generic UI component, not the React module! component: dialog This is the name of the generic UI component, not the React module!
Projects
Status: Backlog
Development

Successfully merging this pull request may close these issues.

4 participants