[base-ui][Select] Buggy absolute input triggers body scrollbar

[OpenSource03]

Steps to reproduce

Link to live example: (click here)

Steps:

1. Install BaseUI (NextJS)
2. Create Select element
3. You should see a scrollbar appear

Current behavior

The scrollbar appears, due to an input element being created along with Select. The input element has position absolute and margin -1, which causes the issue to happen.

Expected behavior

No body scrollbar

Context

No response

Your environment

npx @mui/envinfo

  BrowserUsed: Arc and Chrome
  System:
    OS: macOS 14.3
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 120.0.6099.216
    Edge: Not Found
    Safari: 17.3
  npmPackages:
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base: ^5.0.0-beta.31 => 5.0.0-beta.31 
    @mui/core-downloads-tracker:  5.15.3 
    @mui/icons-material: ^5.15.3 => 5.15.3 
    @mui/material: ^5.15.3 => 5.15.3 
    @mui/private-theming:  5.15.3 
    @mui/styled-engine:  5.15.3 
    @mui/styled-engine-sc: ^6.0.0-alpha.12 => 6.0.0-alpha.12 
    @mui/system: ^5.15.3 => 5.15.3 
    @mui/types:  7.2.12 
    @mui/utils:  5.15.3 
    @types/react: ^18 => 18.2.46 
    react: ^18 => 18.2.0 
    react-dom: ^18 => 18.2.0 
    styled-components: ^6.1.6 => 6.1.6 
    typescript: ^5 => 5.3.3 

Search keywords: select, margin

[oliviertassinari]

To reproduce, very simple: go to https://mui.com/base-ui/react-select/#introduction, and voilà:

If you are not seeing it, please, enable https://www.notion.so/mui-org/Laptop-configuration-d306ca6120004d2e9034144e71c45b34?pvs=4#2bd404c6337443a0870ba1238293a457 as a permanent setting on macOS.

It's a regression introduced in #38167, so I think it should be the same people who take care of this bug to optimize context.

Also, it's strange, why is are the source of the Base UI select

material-ui/packages/mui-base/src/useSelect/useSelect.ts

Lines 33 to 44 in 9e0af1b

	const visuallyHiddenStyle: React.CSSProperties = {
	clip: 'rect(1px, 1px, 1px, 1px)',
	clipPath: 'inset(50%)',
	height: '1px',
	width: '1px',
	margin: '-1px',
	overflow: 'hidden',
	padding: 0,
	position: 'absolute',
	left: '50%',
	bottom: 0, // to display the native browser validation error at the bottom of the Select.
	};

inline the style of the visuallyHidden helper?

material-ui/packages/mui-utils/src/visuallyHidden.ts

Lines 1 to 11 in 9e0af1b

	const visuallyHidden: import('react').CSSProperties = {
	border: 0,
	clip: 'rect(0 0 0 0)',
	height: '1px',
	margin: -1,
	overflow: 'hidden',
	padding: 0,
	position: 'absolute',
	whiteSpace: 'nowrap',
	width: '1px',
	};

It looks like bundle-size bloat to me. It would also solve this bug.

[oliviertassinari]

Off-topic

We have two ways to improve here:

1. @zannager There is no need to assign Albert. Brijsh had already opened a PR, so if someone should have been assigned, it's Brijesh. See above:

2. @brijeshb42 But then, since Brijesh opened a PR, I think you should have removed the "status: waiting for maintainer" label (I didn't because I don't want to create a dependency on me, I left a comment as if I was a random contributor). This would have cleared it from @zannager view https://www.notion.so/mui-org/GitHub-community-issues-PRs-Tier-1-12a84fdf50e44595afc55343dac00fca as an issue that needs to be handled.