[joy-ui][Select] Select renders hidden input even when the name prop is not set

[Bestwebdesign]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/mx2ty5?file=/Demo.js

Steps:

1. Open the attached link
2. Inspect the root element of the Select component to find the hidden input without a name attribute.

Current behavior 😯

Hidden input is rendered even when the name prop is not specified. Since the hidden input does not have a name attribute, it generates a warning in the console:

A form field element should have an id or name attribute

Expected behavior 🤔

According to the documentation, hidden input should not be rendered when the name prop is not provided:
https://mui.com/joy-ui/api/select/#Select-prop-name

Context 🔦

No response

Your environment 🌎

No response

[mj12albert]

Since the hidden input does not have a name attribute, it generates a warning in the console

@Bestwebdesign How did you get this warning to show? I don't see anything in the console in the linked sandbox

According to the documentation, hidden input should not be rendered when the name prop is not provided

🤔 I think it's a docs issue, the hidden input is always rendered

[Bestwebdesign]

@mj12albert The message is displayed in Chrome.
Here is the direct link https://mx2ty5.csb.app/

And here is the screenshot

[yash-not-bot22]

The name prop is only used while submitting the form and there is no form used here . I think what the docs is trying to say is when you submit the form with name prop it will be treated as a hidden input . here when you submit the form it will say "foo":"" where foo is value of 'name' prop

[Bestwebdesign]

I understand, but in my specific case I don't need the name attribute, but I also don't want to see these warnings 😄
The docs just confused me, I thought that when the name prop is not specified, the input will not be rendered, but it turns out that it is always rendered.

So when a name is not provided, Chrome complains with this message

A form field element has neither an id nor a name attribute. This might prevent the browser from correctly autofilling the form.
To fix this issue, add a unique id or name attribute to a form field. This is not strictly needed, but still recommended even if you have an autocomplete attribute on the same element.

I tried adding id to this input, but it turns out that Select does not accept it in slotProps. The code below doesn't add an id to the input, so I ended up using name to get rid of Chrome's complaints.

<Select
    slotProps={{
        input: {
            id: 'Test',
        },
    }}
>
    <Option value="test">Test</Option>
</Select>

[siriwatknp]

@Bestwebdesign You are right, the doc is confusing. We could do 2 things:

• The <input> is always rendered, we should fix the description of the name prop on the API page.
• Add a random id to the <input> so that the warning disappears and a hiddenInput slot to Select.

[Bestwebdesign]

That would be great. However, I see it also affects other controls:

Switch: https://2n9sk3.csb.app/
Input: https://mgfgf6.csb.app/
Textarea: https://spn686.csb.app/

To permanently suppress this warning, all these inputs would need to get a random id when it's not specified.

So I'm not sure what's better, add a random id to all these controls, or just add an input slot to Select and let developers assign the id themselves in case they don't use the name prop.

I also noticed that components like Switch use the input slot for hidden input, so maybe for consistency Select should also use input instead of hiddenInput.