-
Notifications
You must be signed in to change notification settings - Fork 1.3k
fix: EditableTable Cells from testing feedback #9108
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
base: main
Are you sure you want to change the base?
Conversation
|
Build successful! 🎉 |
## API Changes
@react-spectrum/s2/@react-spectrum/s2:EditableCell EditableCell {
align?: 'start' | 'center' | 'end' = 'start'
children: ReactNode
colSpan?: number
id?: Key
isSaving?: boolean
- onSubmit: () => void
+ onSubmit: (Record<string, any>) => void
renderEditing: () => ReactNode
showDivider?: boolean
textValue?: string
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
things look good to me for the most part, just one thing for Android that needs to be changed
| }; | ||
|
|
||
| // Can't differentiate between Dialog click outside dismissal and Escape key dismissal | ||
| let isMobile = !useMediaQuery('(any-pointer: fine)'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this doesn't seem to trigger for Android, might need to use touch: '@media not ((hover: hover) and (pointer: fine))', which is what the style macro uses
| useEffect(() => { | ||
| let dialog = dialogRef.current?.UNSAFE_getDOMNode(); | ||
| if (isOpen && dialog) { | ||
| let handler = (e: KeyboardEvent) => { | ||
| if (e.key === 'Escape') { | ||
| setIsOpen(false); | ||
| e.stopPropagation(); | ||
| e.preventDefault(); | ||
| } | ||
| }; | ||
| dialog.addEventListener('keydown', handler); | ||
| return () => { | ||
| dialog.removeEventListener('keydown', handler); | ||
| }; | ||
| } | ||
| }, [isOpen]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thats a bit annoying that this needs to be done since dismissible dialogs close on touch start I assume... Feels like a relatively common use case too, wonder if we could support this by default
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Closes
This changes from the popover to a true dialog for touch devices where a keyboard may come into view and mess with the scroll position.
It removes the intermediate ref from the examples and uses the form submission to track updated values.
Adds aria labels and better label examples.
Removes inverted row hover color.
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: