fix(ActionMenu): correct action menu scrolling on open

[Bracciata]

Closes https://github.com/dequelabs/walnut/issues/13307

This fix prevents a bug where when there was a large list of ActionMenus in one container on first open it may scroll to the top of the page.

This bug be reproduced by reverting the changes in this pr and scrolling down to the bottom of a page rendered with this MDX

function ScrollPreservedExample() {
  const projects = [
    { id: '1', name: 'Project One', lastRun: '2 hours ago' },
    { id: '2', name: 'Project Two', lastRun: '1 day ago' },
    { id: '3', name: 'Project Three', lastRun: '3 days ago' },
    { id: '4', name: 'Project Four', lastRun: '1 week ago' },
    { id: '5', name: 'Project Five', lastRun: '2 weeks ago' },
    { id: '6', name: 'Project Six', lastRun: '3 weeks ago' },
    { id: '7', name: 'Project Seven', lastRun: '1 month ago' },
    { id: '8', name: 'Project Eight', lastRun: '2 months ago' },
    { id: '9', name: 'Project Nine', lastRun: '3 months ago' },
    { id: '10', name: 'Project Ten', lastRun: 'Never' },
  ];
  return (
    <div style={{ padding: '0 1rem', minHeight: '200vh' }}>
      <div style={{ marginBottom: '2rem' }}>
        <strong>Scroll down to a row near the bottom, then open Settings.</strong> If the bug is present, the page may jump.
      </div>
      <Panel>
        <Table>
          <TableHead>
            <TableRow>
              <TableHeader scope="col">Project Name</TableHeader>
              <TableHeader scope="col">Last Run</TableHeader>
              <TableHeader scope="col">Actions</TableHeader>
            </TableRow>
          </TableHead>
          <TableBody>
            {projects.map((project) => (
              <TableRow key={project.id}>
                <TableHeader scope="row" variant="cell">
                  {project.name}
                </TableHeader>
                <TableCell>{project.lastRun}</TableCell>
                <TableCell>
                  <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                    <Link href={`#project-${project.id}`}>Open project</Link>
                    <ActionMenu
                      trigger={
                        <Button
                          variant="secondary"
                          aria-label={`Settings for ${project.name}`}
                        >
                          <Icon type="gears" />
                          Settings
                          <Icon type="chevron-down" />
                        </Button>
                      }
                    >
                      <ActionList>
                        <ActionListLinkItem href={`#configure-${project.id}`}>
                          Configure project
                        </ActionListLinkItem>
                        <ActionListLinkItem href={`#members-${project.id}`}>
                          Members
                        </ActionListLinkItem>
                      </ActionList>
                    </ActionMenu>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Panel>
    </div>
  );
}`

[Copilot]

Pull request overview

Fixes an ActionMenu open-time scroll jump by delaying focus until after layout has completed.

Changes:

• Defers focusing the ActionMenu list via a double requestAnimationFrame when open becomes true.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-2248.d15792l1n26ww3.amplifyapp.com

Addressed

[Zidious]

Left a comment inline -

I'll leave final 👀 to @anastasialanz - I'm not too familiar with requestAnimationFrame to give an educated opinion.

Addressed