ui-menu focus element that is not yet positioned correctly

[czeslaaw]

Background Information

We are in the middle of rewriting the Impact dashboard to Instructure UI. When opening ui-menu the page scrolls to the top-left corner around 80% of the time.

Package Version(s):
8.36.0
React 18.2.0

Browser:
Chrome 111.0.5563.110

OS:
MacOS 12.6.3

Device:
Mac

Component:
ui-menu

Describe the Bug

There seems to be some kind of race condition between positioning dropdown menu and focusing on it. It happens 80% of time. Trying to debug it makes it happened less often 😈

Screen.Recording.2023-03-28.at.17.36.08.mov

Screen.Recording.2023-03-28.at.17.36.27.mov

Steps To Reproduce

Minimal code to reproduce:

import { Button } from '@instructure/ui-buttons';
import { Menu } from '@instructure/ui-menu';
import React from 'react';

export const App: React.FC = () => {
	const triggerButton = <Button>Trigger</Button>;

	return (
		<>
			<p style={{ fontSize: '150px' }}>Somthing big to require scrolling for button</p>
			<Menu trigger={triggerButton}>
				<Menu.Item>Foo</Menu.Item>
				<Menu.Item>Bar</Menu.Item>
				<Menu.Item>Baz</Menu.Item>
			</Menu>
		</>
	);
};

Expected Behavior

ui-menu not scrolling

Current Workaround(s):
Could not find any

Products Affected:
Impact

Are you willing to submit a PR to fix?

• Yes, I'm willing to submit a PR

Requested Priority:
Normal

[ke1k0]

Hi @czeslaaw ! Thank you for the bug report, we will have a look at it soon.

[czeslaaw]

What is the status of this issue?

[czeslaaw]

EDIT: it is reproducible in cloned project if we remove <React.StrictMode> tag

When I cloned this project I couldn't reproduce it but it is reproducible on this minimal code:

index.jsx (this is a minimal example but I recommend copy-pasting this menu a few times, it will happen more often)

import { Button } from "@instructure/ui-buttons";
import { Menu } from "@instructure/ui-menu";
import React from "react";
import ReactDOM from "react-dom/client";

export const App = () => {
  const triggerButton = <Button>Trigger</Button>;

  return (
    <>
      <p style={{ fontSize: "200px" }}>
        Something big to require scrolling for button
      </p>
      <Menu trigger={triggerButton}>
        <Menu.Item>Foo</Menu.Item>
        <Menu.Item>Bar</Menu.Item>
        <Menu.Item>Baz</Menu.Item>
      </Menu>
    </>
  );
};

const root = document.createElement("div");
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);

package.json

{
  "name": "inst-ui-focus-bug",
  "version": "1.0.0",
  "main": "index.jsx",
  "license": "MIT",
  "scripts": {
    "start": "webpack serve --mode development"
  },
  "dependencies": {
    "@instructure/ui-buttons": "^8.38.0",
    "@instructure/ui-menu": "^8.38.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "esbuild-loader": "^3.0.1",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.78.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.2"
  }
}

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./index.jsx",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "index_bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: "esbuild-loader",
        options: { target: "es2021" },
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()],
  resolve: {
    extensions: [".js", ".jsx"],
  },
};

Weird stuff 🤷

[czeslaaw]

Created PR: #1217

[matyasf]

fixed and released the PR, thanks a lot for the contribution!