endAdornment arrow taking too much space with the last character in Material-UI Autocomplete

Question

<Autocomplete
  {...defaultProps}
  id="disable-close-on-select"
  disableCloseOnSelect
  renderInput={(params) => (
    <TextField {...params} label="disableCloseOnSelect" variant="standard" />
  )}
/>

This is the sandbox link.

endAdornment arrow taking too much space with the last character in Material-UI Autocomplete.

NearHuscarl · Answer 1 · 2021-10-04T10:19:42.570

0

You can update the padding-right by targeting the element with the class MuiAutocomplete-inputRoot. You also need to use the double ampersand && to increase the CSS specificity so the property can be overridden:

import Autocomplete, { autocompleteClasses } from "@mui/material/Autocomplete";

export default function ComboBox() {
  return (
    <Autocomplete
      options={top100Films}
      inputValue="looooooooooooooooooooooooooooooong text"
      sx={{
        width: 300,
        [`&& .${autocompleteClasses.inputRoot}`]: {
          paddingRight: 2, // change this value to your preference
        }
      }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />
  );
}

Live Demo

edited Oct 04 '21 at 10:19

answered Oct 04 '21 at 10:11

NearHuscarl

66,950
18
261
230

this is not working. last character of input we type and arrow should have very less space – Prateek Pareek Oct 04 '21 at 10:17
@PrateekPareek try lowering the `padding-right` to say 2. Does that work for you, or is it not working at all? – NearHuscarl Oct 04 '21 at 10:19
it is not working at all – Prateek Pareek Oct 04 '21 at 10:31
@PrateekPareek what MUI version are you using? – NearHuscarl Oct 04 '21 at 10:32
actually position of arrow is absolute and it is taking fixed gap from left . we need that it adjust according to the length of the characters. like if a word is length of 2 and another word is length of 10 but the position of arrow is static. it does not adjust – Prateek Pareek Oct 04 '21 at 10:34
4.12.1 version of mui i am using – Prateek Pareek Oct 04 '21 at 10:37
@PrateekPareek The arrow is always static. But you want to move to the left if the text is shorter? what happen when the `TextField` is empty? – NearHuscarl Oct 04 '21 at 10:44
yes right i want to move that arrow on left if the text is shorter . in empty text we will give a default space – Prateek Pareek Oct 04 '21 at 10:48

endAdornment arrow taking too much space with the last character in Material-UI Autocomplete

1 Answers1

Live Demo