Multiple on combobox with discriminated union component (React)

[andredewaard]

I have created a Listbox component which can handle multiple and single input, I do this with a discriminated union.

type GenericListboxProps<TValue,> = {
  value: Readonly<TValue>;
};

interface SingleListboxProps extends GenericListboxProps<string | null> {
  multiple: false;
  onChange: (value: string) => void;
}

interface MultiListboxProps extends GenericListboxProps<string[]> {
  multiple: true;
  onChange: (value: string[]) => void;
}

export default function Select(props: SingleListboxProps | MultiListboxProps) {

  return (
    <Listbox
      value={props.value}
      multiple={props.multiple}
      onChange={props.onChange}
    >
  </Listbox>
  )
}

but when i do this on the combobox it throws an error on the multiple prop

// Same types as above
    <Combobox
      as="div"
      value={props.value}
      multiple={props.multiple} // the expected type comes from property 'multiple' which is declared here on type 'IntrinsicAttributes & { value?: string | readonly string[] | null | undefined
      onChange={props.onChange}
    >
    </Combobox>

What is the difference in that this works with the listbox but not with the combobox?

[andredewaard]

I can kinda make it work when i add

multiple={props.multiple as any}

All the functionality works, but its still a hacky solution.