[Select] Fix focus visible always set on menu item by silviuaavram · Pull Request #47912 · mui/material-ui (original) (raw)

Proposed e2e test

The e2e setup builds with NODE_ENV=production and runs in real Chromium — focus({ focusVisible }) is natively supported there.

Fixture test/e2e/fixtures/Select/SelectFocusVisible.tsx:

import * as React from 'react'; import Select from '@mui/material/Select'; import MenuItem from '@mui/material/MenuItem';

export default function SelectFocusVisible() { return ( Ten Twenty Thirty ); }

Tests in test/e2e/index.test.ts:

describe('', () => { it('should not show focus-visible on menu item when opened by mouse', async () => { await renderFixture('Select/SelectFocusVisible');

const trigger = page.getByRole('combobox');
await trigger.click();

await page.waitForSelector('[role="listbox"]');

const selectedItem = page.locator('[role="option"][aria-selected="true"]');
await expect(selectedItem).toBeFocused();
const hasVisible = await selectedItem.evaluate(
  (el) => el.classList.contains('Mui-focusVisible'),
);
expect(hasVisible).toEqual(false);

});

it('should show focus-visible on menu item when opened by keyboard', async () => { await renderFixture('Select/SelectFocusVisible');

await page.keyboard.press('Tab');
const trigger = page.getByRole('combobox');
await expect(trigger).toBeFocused();

await page.keyboard.press('Enter');
await page.waitForSelector('[role="listbox"]');

const selectedItem = page.locator('[role="option"][aria-selected="true"]');
await expect(selectedItem).toBeFocused();
const hasVisible = await selectedItem.evaluate(
  (el) => el.classList.contains('Mui-focusVisible'),
);
expect(hasVisible).toEqual(true);

}); });

Both modalities (mouse vs keyboard) are covered, directly validating the user-facing behavior this PR fixes — no NODE_ENV hacks needed.