How can I do a close button to a mui-select and a mui-datepicker?

Question

I would like to add a close button to a mui-select and a mui-datepicker.

Tried to find but couldn't.

Does anyone know how to do that?

Answer 1

You can do this by controlling the state of the select manually. Properties open, onOpen, onClose can help you.

import * as React from 'react';
import {
  OutlinedInput,
  InputLabel,
  MenuItem,
  FormControl,
  Select,
  Checkbox,
  Button
} from '@mui/material';

const names = [
  'Oliver Hansen',
  'Van Henry',
  'April Tucker',
];

export default function MultipleSelectCheckmarks() {
  const [personName, setPersonName] = React.useState([]);
  const [showSelect, setShowSelect] = React.useState(false);

  const handleChange = (e) => {
    setPersonName(e.target.value.filter(Boolean));
  };

  return (
    <FormControl sx={{ m: 1, width: 300 }}>
      <InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
      <Select
        multiple
        open={showSelect}
        onOpen={() => setShowSelect(true)}
        onClose={() => setShowSelect(false)}
        labelId="demo-multiple-checkbox-label"
        id="demo-multiple-checkbox"
        value={personName}
        onChange={handleChange}
        input={<OutlinedInput label="Tag" />}
        renderValue={(selected) => selected.join(', ')}
      >
        {names.map((name) => (
          <MenuItem key={name} value={name}>
            <Checkbox checked={personName.includes(name)}/>
            {name}
          </MenuItem>
        ))}
        <Button
            color='success'
            variant='contained'
            onClick={() => {
                setShowSelect(false);
            }}
        >
            Close
        </Button>
      </Select>
    </FormControl>
  );
}