fix: Inline editing tables #8983
Conversation
| // If the active element is NOT tabbable but is contained by an element that IS tabbable (aka the cell), the browser will actually move focus to | ||
| // the containing element. We need to special case this so that tab will move focus out of the grid instead of looping between | ||
| // focusing the containing cell and back to the non-tabbable child element | ||
| if (next && (!next.contains(document.activeElement) || (document.activeElement && !isTabbable(document.activeElement)))) { |
There was a problem hiding this comment.
Note that I didn't write a test for this because it seems like user.tab() doesn't emulate this browser behavior
|
Build successful! 🎉 |
| onCancel={() => {}} | ||
| isSaving={item.isSaving[column.id!]} | ||
| renderEditing={() => ( | ||
| <Picker |
There was a problem hiding this comment.
just a nitpick, but I noticed that opening the picker here on mobile now properly expands the dropdown to grow to fit the available Table space, albiet with a slightly strange "grow" animation that only happens the first time the picker gets opened. However, I was wondering why it doesn't do that for the Async example? I was assuming it would use the width of the table as its bounds per say
There was a problem hiding this comment.
I also noticed that "grow" animation, I have no idea where it's coming from. There should be a max width on the popover of the table's width,
There was a problem hiding this comment.
For others reviewing the PR, the positioning of the popover being off is expected, the fix is in #8848 (I forgot lol)
Closes
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: