Searching for help with RAC dialog

[p1pah]

Good afternoon,

We have recently converted to RAC and have been loving it. The only hiccup in our app is when trying to use AGGrid and the RAC dialog together. In the attached code sandbox you will see that AGGrid works perfectly fine out side of a "dialog component" But when using it in a dialog, the tabbing gets all out of whack. Is this potentially a tabIndex issue or something else? We have had to use another dialog solution because of this, but any help/insight would be greatly appreciated!

https://codesandbox.io/p/sandbox/rac-cqlk4n

[snowystinger]

Looks like they've implemented a roving tab index, there might be interference with our containing FocusScope. I'd need to know more about how their roving tab index works, if it kicks in after blur vs on tab key, etc.

However, according to their docs, they only mention tabbing through cells in the custom section, I think you could just turn off the Tab behavior https://www.ag-grid.com/react-data-grid/keyboard-navigation/#custom-navigation everything is navigable via the arrow keys already, and I checked that works in our dialog.

Edit: Looked again at our FocusScope with contain, it looks like we don't just prevent focus from leaving, we actually take over the focus movement for Tab completely

react-spectrum/packages/@react-aria/focus/src/FocusScope.tsx

Line 341 in a0f0604

focusElement(nextElement, true);

which is why it's focusing directly onto the buttons in the table for example.

[p1pah]

@snowystinger any chance we could override this 😄 ?

[snowystinger]

you could probably stopPropagation of the Tab keyDown before it gets to the FocusScope, but I'd test when focus "leaves" the table

[p1pah]

@snowystinger you have restored my sleep schedule.

We will just wrap our grid divs with something like this. Thank you so much for the responsiveness and the help!