[TextField] endAdornment is over/below a long label

[SBRKH]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://stackblitz.com/edit/react-uvs3ey?file=Demo.tsx

Steps:

1. Create an input
2. Put a long label
3. Add an endAdornment

Current behavior 😯

The label is over/below the endAdornment when is longer than the input width.

Expected behavior 🤔

The label sould be truncated with "..." in the same way it's doing when label is more long than the input width.

Context 🔦

I need to put an endAdornment for input like password (for our french users the input is "Mot de passe") and we give them an endAdornment to show their password during the register.
The fact that the end of the label is going over the endAdornment (or below) causes discomfort for some of them.

Your environment 🌎

npx @mui/envinfo

    System:
    OS: macOS 14.0
  Binaries:
    Node: 18.17.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 117.0.5938.149
    Edge: Not Found
    Safari: 17.0
  npmPackages:
    @emotion/react: ^11.11.0 => 11.11.0 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/icons-material: ^5.11.16 => 5.11.16 
    @mui/material: ^5.13.2 => 5.13.2 
    @mui/x-date-pickers: ^6.10.2 => 6.10.2 
    @types/react: ^18.0.28 => 18.0.28 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.0.2 => 5.0.2 

[Abdullah7771]

A little confused in currrent vs expected behaviour and two passsword labels.Can you provide a little more context.Also while toggling visibility for passwords why is mouse cursor shifted towards start of input instead of end?

[jahedullah]

@SBRKH how to submit the answer?

[SBRKH]

A little confused in currrent vs expected behaviour and two passsword labels.Can you provide a little more context.Also while toggling visibility for passwords why is mouse cursor shifted towards start of input instead of end?

Hello,
Sorry for the delay.

Actually, this is what i got :

As you can see, the label is over the end adornment for the input "Confirmer le mot de passe"
For me the label should be truncate in the same way that when you've a large label and should be "Confirmer le mot de ...", like that the label will not be over the adornment.

[mj12albert]

Related to #36550 and #37069

@SBRKH Here's a workaround you could try:

<TextField
  variant="outlined"
  label="A really long and contrived input label"
  InputLabelProps={{
    sx: {
      maxWidth: `calc(100% - ${isFocused ? 0 : 48}px)`,
    },
  }}
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <IconButton
          aria-label="toggle password visibility"
          onClick={handleClick}
          onMouseDown={handleMouseDown}
          edge="end"
        >
          <Visibility />
        </IconButton>
      </InputAdornment>
    ),
  }}
  onFocus={() => setFocused(true)}
  onBlur={() => setFocused(false)}
  sx={{ width: 100 }}
/>

Demo: https://codesandbox.io/s/https-github-com-mui-material-ui-issues-39427-vx2gvd?file=/demo.tsx

I wouldn't change the default styles for this, customizing the maxWidth of the label is something users can do
What we should do though is fix the ownerState style overrides of InputLabel so that this particular customization can be done without having to manually add a focused state:

const theme = createTheme({
  components: {
    MuiInputLabel: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          ...(ownerState.focused && {
            maxWidth: `calc(100% - ${isFocused ? 0 : 48}px)`,
          }),
        }),
      },
    },
  },
});

[SBRKH]

Hi @mj12albert,
The workaround work perfectly thank you, my research was bad apparently (i didn't see theses issues).