How to remove placeholder text from MUI Autocomplete, TextField when clicked?

I’m using Material-UI (MUI) Autocomplete with a TextField, and I want to achieve a specific behavior. Currently, when I click on the search bar, the placeholder text moves to the top of the TextField. However, I want to completely remove the placeholder text when the search bar is clicked.

Here’s my current code:

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

const top100Cars = [
  { label: 'Toyota' },
  { label: 'Ford' },
  { label: 'Chevrolet' },
  { label: 'Tesla' },
  { label: 'Honda' },
  { label: 'BMW' },
  { label: 'Audi' },
  { label: 'Mercedes-Benz' },
  { label: 'Ferrari' },
  { label: 'Porsche' },
  { label: 'Lamborghini' },
  { label: 'Nissan' },
  { label: 'Volkswagen' },
  { label: 'Mazda' },
  { label: 'DeLorean' },
  { label: 'Dodge' },
];



export default function searchBar() {
  // const [selectedBrand, setSelectedBrand] = React.useState(null);
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={top100Cars}
      // value={selectedBrand}
      // onChange={(event, newValue) => {
      //   setSelectedBrand(newValue);
      // }}
      sx={{
        width: 254, backgroundColor: 'white', borderRadius: 50,
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Марка"
          size='small'
        />
      )}
    />
  );
}

This is how it looks right now:

I want to remove the placeholder text that appears in the upper left corner when clicked on the text field. I hope this makes sense to you!

I’ve tried setting InputLabelProps and InputProps properties with various configurations, but the placeholder text still remains. How can I modify my code to achieve the desired behavior of removing the placeholder text when the search bar is clicked?

>Solution :

You could try to place an empty lable in the textField, like this :

<TextField
    id="standard-full-width"
    label=""
    placeholder="Placeholder"
/>

As suggested here