Skip to content

[ts] selectedItem type definition for controlled usage #1088

@mattrothenberg

Description

@mattrothenberg
  • downshift version: latest
  • node version: 12.31.
  • npm (or yarn) version: 1.21.

Relevant code or config

interface Item = {
  label: string;
  value: string;
}
const [selectedItem, setSelectedItem] = React.useState<Item|null>(null);
const props = useCombobox({selectedItem});

What you did:
In trying to control a Combobox by passing a null value to it, I get a TS error since the type definition of selectedItem expects either an Item or undefined. As far as I understand from reading the docs, passing an undefined value here suggests that you want to use the combobox in an uncontrolled manner, which is not what I'm after.

https://github.com/downshift-js/downshift/blob/master/typings/index.d.ts#L417

 selectedItem?: Item // Null values are not allowed here, meaning you get a TS error when you try to control this prop.

What happened:

Type '{ value: string; label: string; } | null' is not assignable to type 'ItemBase | undefined'.
  Type 'null' is not assignable to type 'ItemBase | undefined'.ts(2322)

Reproduction repository:
https://codesandbox.io/s/unruffled-elion-1fx0s?file=/src/App.tsx

Suggested solution:
Should the type definition for selectedItem be expanded to include null types as well?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions