1

Is there a way to prevent TextField width from shrinking when adding InputAdornment?

Image:
enter image description here

My current code:

<TextField
  label="Username"
  {...formik.getFieldProps("username")}
  InputProps={{
    endAdornment: (
      <InputAdornment position="start">
        <Tooltip title="demo">
          <ErrorIcon sx={{ color: "orange" }} />
        </Tooltip>
      </InputAdornment>
    ),
  }}
/>
jalen_blue
  • 165
  • 1
  • 2
  • 12

2 Answers2

0

You have just to change "position" property from start to end Because when you specify start it's supposed to add margin on the right

Shadi Amr
  • 494
  • 3
  • 9
  • The white gap got a little smaller, but issue isn't solved – jalen_blue Aug 23 '22 at 11:21
  • then what was your issue exactly ? – Shadi Amr Aug 23 '22 at 11:22
  • Is there a way to get the blue background color to span the entire container? Looks weird like this – jalen_blue Aug 23 '22 at 11:26
  • since you are using InputAdornment it's impossible i guess, so it reserves some space to fit the icon inside it – Shadi Amr Aug 23 '22 at 11:29
  • I see. Any idea how can I remove the blue fill instead then? So that the entire container remains white throughout. Btw, it only turns blue when I use autofill. If I were to manually type, the container doesn't turn blue. – jalen_blue Aug 23 '22 at 11:33
  • i don't know why you get this blue background, maybe it has to do with some basic configurations you have, anyway this is a sample of my solution : https://codesandbox.io/s/wonderful-chihiro-5zz6om?file=/demo.tsx – Shadi Amr Aug 23 '22 at 12:36
  • Thanks, but it seems like it's just a feature that Chrome has - Chrome changes the background color of the input when autofill is used as discussed in https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete – jalen_blue Aug 23 '22 at 14:13
  • ah okay then good luck with that – Shadi Amr Aug 23 '22 at 14:36
0
/**
  in short: first boxSizing ensures that input paddings won't overflow,
  second ensures that input spans across the whole TextField,
  and WebkitBoxShadow ensures that autofill color remains transparent
*/

<TextField
  label="Username"
  {...formik.getFieldProps("username")}
  inputProps={{
    style: { 
      boxSizing: "border-box",
      WebkitBoxShadow: "0 0 0 1000px transparent inset"
    }
  }}
  InputProps={{
    style: {
      boxSizing: "border-box"
    },
    endAdornment: (
      <InputAdornment position="start">
        <Tooltip title="demo">
          <ErrorIcon sx={{ color: "orange" }} />
        </Tooltip>
      </InputAdornment>
    ),
  }}
/>
Dato Gogniashvili
  • 1
  • 1