Add clear button to Select

[luiskabes-arch]

I'm using a Select & Button as a filter, but there is a lack of the Select which we can't reset the filter, it'll be helpful if there is an 'X' icon before the chevron icon for clear the selected item, and maybe onClear prop for clear the selectedItem

[heapwalker]

I faced the same need and made use of the endContent props to add a clear button (which is actually a link of <a> tag):

import { useEffect, useMemo, useState } from 'react';
import { Button, Link, Select, SelectItem } from '@nextui-org/react';

import { Selection } from '@nextui-org/react';
import { SharedSelection } from '@nextui-org/system';

function AppSelect() {
  const [selection, setSelection] = useState<Selection>(new Set([]));

  const handleSelectionChange = (selection: SharedSelection) => {
    setSelection(selection);
  };

  return (
    <Select
      endContent={
        <Button
          as={Link} // it is important, since the wrapper is a already a <button>. Missing this line will result in an error on nested <button> tags
          href="#"
          aria-label="Clear"
          isIconOnly
          radius="full"
          size="sm"
          variant="light"
          onClick={(e) => {
            e.preventDefault();
            handleSelectionChange(new Set([]));
          }}
        >
          X{/* Or any icon you preferred */}
        </Button>
      }
      selectedKeys={selection}
      onSelectionChange={handleSelectionChange}
    >
      {(option) => <SelectItem key={option.key}>{option.label}</SelectItem>}
      {/* ... */}
    </Select>
  );
}

export default AppSelect;

p.s. My nextui version: "@nextui-org/react": "^2.4.6"