chakra-select-icon-click-bug?

gistfile1.txt

// Accordian

export const FilterMenu = ({ children, defaultIndex }: FilterMenuProps) => (
  <Accordion
    allowToggle
    allowMultiple
    borderRadius={"base"}
    padding={{ base: 3, lg: 4 }}
    background={"white"}
    direction={"column"}
    width={{ base: "full", lg: "21.25rem" }}
    maxW={{ base: "21.25rem", lg: "unset" }}
    boxShadow={"0px 8px 4px 0px rgba(0, 0, 0, 0.08)"}
    defaultIndex={defaultIndex}
  >
    <AccordionItem borderTopWidth="0" value="1">
      <AccordionButton aria-label="Close geography filter menu" px={0}>
        <Box
          as="span"
          flex="1"
          textAlign="left"
          fontSize="large"
          fontWeight="medium"
        >
          Filter by District
        </Box>
        <AccordionIcon />
      </AccordionButton>
      <AccordionPanel pb={0} borderTopWidth="1px" borderColor="gray.200" px={0}>
        {children}
      </AccordionPanel>
    </AccordionItem>
  </Accordion>
);

# select
export function AdminDropdown({
  formId,
  formLabel,
  isSelectDisabled = false,
  onFormLabelClick = () => null,
  onSelectValueChange = () => null,
  selectValue = null,
  children,
}: AdminDropdownProps) {
  return (
    <FormControl
      id={formId}
    >
      <FormLabel onClick={onFormLabelClick} pb={0}>
        {formLabel}
      </FormLabel>
      <Select
        isDisabled={isSelectDisabled}
        placeholder="-Select-"
        variant="base"
        onChange={(e: FormEvent<HTMLSelectElement>) =>
          onSelectValueChange(
            e.currentTarget.value === "" ? null : e.currentTarget.value,
          )
        }
        value={selectValue ?? ""}
      >
        {children}
      </Select>
    </FormControl>
    
    # example usage
    export function DistrictTypeDropdown({
  selectValue,
  updateSearchParams,
}: DistrictTypeDropdownProps) {
  const updateDistrictType = (nextDistrictType: string | null) => {
    const nextSearchParams: Record<string, string> =
      nextDistrictType === null ? {} : { districtType: nextDistrictType };
    updateSearchParams(nextSearchParams);
  };

  return (
    <AdminDropdown
      formId="districtType"
      formLabel="District Type"
      selectValue={selectValue}
      onSelectValueChange={updateDistrictType}
    >
      <option value={"cd"}>Community District</option>
      <option value={"ccd"}>City Council District</option>
    </AdminDropdown>
  );