[TextField] Notched, outlined label incorrect when using InputLabelProps to override `required` prop

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

We have a form with all required fields. We would like to remove the * added to required fields as it is redundant when all fields are required. However, we still want to leverage the native HTML validation on input elements.

In sum, we'd like to set required={true} on TextInput (and others), but not render an asterisk in the label.

This is almost achievable by passing InputLabelProp={{required: false}}. However, for outlined inputs, the notch is still rendered as if the asterisk is present.

(Repro: https://codesandbox.io/s/elated-lewin-oge4dl?file=/index.js)

Note the extra space next to the label.

Expected behavior 🤔

Ideally, if InputLabelProps={{required: false}} is set, the notched label would not render the extra space where the asterisk would be:

Steps to reproduce 🕹

Steps:

1. Create a TextField with props required={true} and InputLabelProps={{required: false}}
2. Note the extra space in the label

https://codesandbox.io/s/elated-lewin-oge4dl?file=/index.js

Context 🔦

I think a broader ability to customize the asterisk rendered on labels for required inputs is most desirable.

Your environment 🌎

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Edge: Not Found
    Firefox: 98.0.1
    Safari: 15.4

Start with the index.js reproduction linked in the issue, then trace how TextField passes InputLabelProps through the outlined label path. Verify that required={true} still enables native validation while required: false prevents the extra notch space; confirm the result against the provided reproduction.