How to use FocusScope restoreFocus

[jasikpark]

I'm using FocusScope to manage focus when deleting a row of my Table from an @ariakit/react Dialog.

I've wrapped my Table in a FocusScope, and wrapped my Dialog in <FocusScope restoreFocus={true}>. In certain situations it returns focus to the previous row fine, but in other situations it returns focus to the document root, which I'm trying to avoid.

What am I doing wrong?

[jasikpark]

Does FocusScope support portaled elements?

[jasikpark]

I believe it just comes down to the fact that userEvent is not the same as my regular keyboard, while trying to test this with @storybook/test.

My end config is:

function Table() {
return <FocusScope><table></table></FocusScope>
}

function ConfirmDialog() {
return (
      <Dialog
        onClose={onClose}
        className={cn(className, styles.Modal, { [styles.Modal___backgroundClicked]: flash })}
        {...props}
        ref={ref}
        hideOnInteractOutside={(e) => {
          // Close the modal if the shouldCloseOnOverlayClick prop is true
          if (shouldCloseOnOverlayClick) {
            return true;
          }
          // Otherwise, give a little animation to let the user know they need to deal with the modal
          setFlash(true);
          e.preventDefault();
          return false;
        }}
        store={dialog}
        autoFocusOnHide={false}
        backdrop={<div className={styles.Modal_overlay} data-testid="modal-overlay" />}
      >
        <FocusScope restoreFocus={true}>
          <ModalProvider closeModal={onClose}>{children}</ModalProvider>
        </FocusScope>
      </Dialog>
    );
}

Which works when interacting manually, but not in tests. So maybe I need to fix my timings or adjust how I trigger keyboard events...

[snowystinger]

If you're using our Dialogs/Modals, then you shouldn't need the FocusScope to restore, there should already be one. You're welcome to have a look at our tests for ideas of what you might be missing.

Here's one which should be close to your example:

react-spectrum/packages/@react-spectrum/table/test/Table.test.js

Line 3698 in 976604a

it('can remove items', async function () {

Have a look around though, we have some here and in ActionBar and a few other places.

[jasikpark]

Right, so I'm using @ariakit/react's Dialog in that instance, we're built on ariakit but I appreciate the specific functionality component 💜

I think I've got it sorted?