(WIP) Add subdialog support to Menu and Autocomplete #7561

LFDanLu · 2025-01-03T00:23:45Z

Closes

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2025-01-03T00:39:57Z

Build successful! 🎉

rspbot · 2025-01-03T20:00:11Z

Build successful! 🎉

…for trigger

…ually focused typically submenus dont have focus restore turned on since it would move focus manually back to the trigger when keyboard closing the menu. However, we cant move focus to virtually focused triggers so enable focus restore on the submenu in these cases

rspbot · 2025-01-14T23:40:35Z

Build successful! 🎉

…pening and closing the subdialog

…tch events to the temporarily cleared focus item the second part of this message refers to the following flow: over submenu via hover in autocomplete, use arrowLeft to close it and then try to reopen it via arrowRight

rspbot · 2025-01-16T01:09:25Z

Build successful! 🎉

rspbot · 2025-01-16T01:10:46Z

Build successful! 🎉

rspbot · 2025-01-16T01:10:47Z

## API Changes

react-aria-components

/react-aria-components:Dialog

 Dialog {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (DialogRenderProps) => ReactNode
   className?: string
   id?: string
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   role?: 'dialog' | 'alertdialog' = 'dialog'
   slot?: string | null
   style?: CSSProperties
 }

/react-aria-components:DialogProps

 DialogProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (DialogRenderProps) => ReactNode
   className?: string
   id?: string
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   role?: 'dialog' | 'alertdialog' = 'dialog'
   slot?: string | null
   style?: CSSProperties
 }

@react-aria/dialog

/@react-aria/dialog:AriaDialogProps

 AriaDialogProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   id?: string
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   role?: 'dialog' | 'alertdialog' = 'dialog'
 }

@react-aria/menu

/@react-aria/menu:AriaSubmenuTriggerProps

 AriaSubmenuTriggerProps {
   delay?: number = 200
   isDisabled?: boolean
+  isVirtualFocus?: boolean
   parentMenuRef: RefObject<HTMLElement | null>
   submenuRef: RefObject<HTMLElement | null>
   type?: 'dialog' | 'menu'
 }

@react-spectrum/dialog

/@react-spectrum/dialog:Dialog

 Dialog {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   bottom?: Responsive<DimensionValue>
   children: ReactNode
   end?: Responsive<DimensionValue>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDismissable?: boolean
   isHidden?: Responsive<boolean>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   onDismiss?: () => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   order?: Responsive<number>
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   role?: 'dialog' | 'alertdialog' = 'dialog'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/dialog:SpectrumDialogProps

 SpectrumDialogProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   bottom?: Responsive<DimensionValue>
   children: ReactNode
   end?: Responsive<DimensionValue>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDismissable?: boolean
   isHidden?: Responsive<boolean>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   onDismiss?: () => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   order?: Responsive<number>
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   role?: 'dialog' | 'alertdialog' = 'dialog'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-spectrum/s2

/@react-spectrum/s2:Dialog

 Dialog {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (DialogRenderProps) => ReactNode
   id?: string
   isDismissible?: boolean
   isKeyboardDismissDisabled?: boolean
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   role?: 'dialog' | 'alertdialog' = 'dialog'
   size?: 'S' | 'M' | 'L' = 'M'
   slot?: string | null
   styles?: StylesProp

/@react-spectrum/s2:CustomDialog

 CustomDialog {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (DialogRenderProps) => ReactNode
   id?: string
   isDismissible?: boolean
   isKeyboardDismissDisabled?: boolean
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   padding?: 'default' | 'none' = 'default'
   role?: 'dialog' | 'alertdialog' = 'dialog'
   size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'
   slot?: string | null
 }

/@react-spectrum/s2:FullscreenDialog

 FullscreenDialog {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (DialogRenderProps) => ReactNode
   id?: string
   isKeyboardDismissDisabled?: boolean
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   role?: 'dialog' | 'alertdialog' = 'dialog'
   slot?: string | null
   styles?: StylesProp
   variant?: 'fullscreen' | 'fullscreenTakeover' = "fullscreen"

/@react-spectrum/s2:Popover

 Popover {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (DialogRenderProps) => ReactNode
   containerPadding?: number = 12
   crossOffset?: number = 0
   hideArrow?: boolean = false
   id?: string
   offset?: number = 8
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   placement?: Placement = 'bottom'
   role?: 'dialog' | 'alertdialog' = 'dialog'
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L'
   styles?: StylesProp
 }

/@react-spectrum/s2:DialogProps

 DialogProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (DialogRenderProps) => ReactNode
   id?: string
   isDismissible?: boolean
   isKeyboardDismissDisabled?: boolean
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   role?: 'dialog' | 'alertdialog' = 'dialog'
   size?: 'S' | 'M' | 'L' = 'M'
   slot?: string | null
   styles?: StylesProp

/@react-spectrum/s2:CustomDialogProps

 CustomDialogProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (DialogRenderProps) => ReactNode
   id?: string
   isDismissible?: boolean
   isKeyboardDismissDisabled?: boolean
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   padding?: 'default' | 'none' = 'default'
   role?: 'dialog' | 'alertdialog' = 'dialog'
   size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'
   slot?: string | null
 }

/@react-spectrum/s2:FullscreenDialogProps

 FullscreenDialogProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (DialogRenderProps) => ReactNode
   id?: string
   isKeyboardDismissDisabled?: boolean
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
   role?: 'dialog' | 'alertdialog' = 'dialog'
   slot?: string | null
   styles?: StylesProp
   variant?: 'fullscreen' | 'fullscreenTakeover' = "fullscreen"

…ing virtual focus

LFDanLu force-pushed the subdialogs branch from 023f7bc to d403f52 Compare January 3, 2025 00:28

Base automatically changed from autocomplete_audit_for_release to main January 6, 2025 18:58

LFDanLu added 7 commits January 14, 2025 15:25

rough start

db04fec

fix contain

2f7cb82

debug ESC handler

c3fece1

fix rendering of subdialog in autocomplete

34ab703

debug dynamic case and fix context

e63c5fd

handle submenutriggers in base collection filtering and fix id issue …

5e3fb0b

…for trigger

LFDanLu force-pushed the subdialogs branch from b3427e8 to 30e6762 Compare January 14, 2025 23:29

LFDanLu added 3 commits January 14, 2025 16:15

ensure that the focused subdialogtrigger item remains focused after o…

c4fc772

…pening and closing the subdialog

Merge branch 'main' of github.com:adobe/react-spectrum into subdialogs

222807e

LFDanLu added 2 commits January 17, 2025 15:48

fix hover for now so I can debug the focus issues

b3f3ecd

fix tab handling in subdialogs and opening submenus on mobile when us…

931c28e

…ing virtual focus

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(WIP) Add subdialog support to Menu and Autocomplete #7561

(WIP) Add subdialog support to Menu and Autocomplete #7561

LFDanLu commented Jan 3, 2025

rspbot commented Jan 3, 2025

rspbot commented Jan 3, 2025

rspbot commented Jan 14, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

(WIP) Add subdialog support to Menu and Autocomplete #7561

Are you sure you want to change the base?

(WIP) Add subdialog support to Menu and Autocomplete #7561

Conversation

LFDanLu commented Jan 3, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Jan 3, 2025

rspbot commented Jan 3, 2025

rspbot commented Jan 14, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

rspbot commented Jan 16, 2025

react-aria-components

/react-aria-components:Dialog

/react-aria-components:DialogProps

@react-aria/dialog

/@react-aria/dialog:AriaDialogProps

@react-aria/menu

/@react-aria/menu:AriaSubmenuTriggerProps

@react-spectrum/dialog

/@react-spectrum/dialog:Dialog

/@react-spectrum/dialog:SpectrumDialogProps

@react-spectrum/s2

/@react-spectrum/s2:Dialog

/@react-spectrum/s2:CustomDialog

/@react-spectrum/s2:FullscreenDialog

/@react-spectrum/s2:Popover

/@react-spectrum/s2:DialogProps

/@react-spectrum/s2:CustomDialogProps

/@react-spectrum/s2:FullscreenDialogProps