[Select] Error prompt when integrating it with native validation

[neviaumi]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://github.com/neviaumi/react-starter/tree/mui-select-reproduce Steps:

1. Clone the branch
2. npm install
3. npm run dev
4. Go to localhost:3000

Current behavior 😯

The error message was shown on bottom of page.

Expected behavior 🤔

Tyr uncomment the line in App.tsx line 28 for app position: relative to FormControl.

the error message is bottom of select now.

Context 🔦

https://github.com/mui/material-ui/blob/94b4c4b57e1e0fef757d59da405c3b5fb508220e/packages/mui-base/src/useSelect/useSelect.ts#L33

The default style on select hidden input has specific position: absolute and expected parent node has position:relative set.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.7
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 1.22.13 - /usr/local/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
  Browsers:
    Chrome: 119.0.6045.123
    Edge: Not Found
    Safari: 17.0
  npmPackages:
    @mui/base: 5.0.0-beta.23 => 5.0.0-beta.23 
    @mui/types:  7.2.8 
    @mui/utils:  5.14.17 
    @types/react: 18.2.37 => 18.2.37 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.2.2 => 5.2.2 

I usage Chrome for test.

[neviaumi]

Also, if you check https://github.com/neviaumi/react-starter/blob/c253f45ad3419bf519a2792a8723e1664a6f8301/src/Select.tsx#L31

I also have to place work around to connect ref to the hidden input of select.

Did it possible to add the hidden input in slots ?

[neviaumi]

when i look into Slider as well .

It won't have problem on the error Prompt

When i look into code here

it was usage visuallyHidden defined on @mui/utils

May be the fix can be done by something similar ?

[mj12albert]

Hey @neviaumi 👋

The default style on select hidden input has specific position: absolute and expected parent node has position:relative set.

If I understand you correctly - do you mean that the issue occurs unless you explicitly place a position:relative parent node around the component ?

Did it possible to add the hidden input in slots ?

Yes, I think this is a good idea and would make the styling issue easier to workaround in userland!

Would you mind sharing a bit more about your use-case for placing a ref on the hidden input?

[neviaumi]

@mj12albert

do you mean that the issue occurs unless you explicitly place a position:relative parent node around the component ?

Yes, the error occur when i enabled browser validation on Select. Ref: Browser Form validation

Would you mind sharing a bit more about your use-case for placing a ref on the hidden input?

i want placing ref because i want integrate react-hook-form native validation so i can use CSS invalid pseudo class for styling input.