Types: Accept async functions for event handler options?

[karlhorky]

• downshift version: 9.0.6
• node version: 20.15.0
• npm version: 10.7.0

Relevant code or config

  const {
    // ...
  } = useCombobox({
    // ...
    onInputValueChange: async ({ inputValue: changedInputValue }) => {
      const response = await fetchApi(
        `/search-results?q=${changedInputValue}`,
        {
          method: 'GET',
        },
      );

      if ('errors' in response) {
        return;
      }

      setResults(response.results);
    },
  });

What you did:

Use async function in option for hook (in my case, useCombobox)

What happened:

The @typescript-eslint/no-misused-promises ESLint rule shows a misused promise:

Promise-returning function provided to property where a void return was expected. eslint (@typescript-eslint/no-misused-promises)

Reproduction repository:

--

Problem description:

The types for useCombobox don't allow for async functions with event handler options:

downshift/typings/index.d.ts

Lines 582 to 588 in ee2a828

	onSelectedItemChange?: (changes: UseComboboxSelectedItemChange<Item>) => void
	onIsOpenChange?: (changes: UseComboboxIsOpenChange<Item>) => void
	onHighlightedIndexChange?: (
	changes: UseComboboxHighlightedIndexChange<Item>,
	) => void
	onStateChange?: (changes: UseComboboxStateChange<Item>) => void
	onInputValueChange?: (changes: UseComboboxInputValueChange<Item>) => void

Suggested solution:

Change the return type of the event handler function types from void to void | Promise<void>