profile
viewpoint

Ask questionsTypeScript: definitions missing `preventDownshiftDefault`

<!-- Thanks for your interest in the project. I appreciate bugs filed and PRs submitted! Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file).

Please fill out this template with all the relevant information so we can understand what's going on and fix the issue.

I'll probably ask you to submit the fix (after giving some direction). If you've never done that before, that's great! Check this free short video tutorial to learn how: http://kcd.im/pull-request -->

  • downshift version: 3.2.10
  • node version: 12.4.0
  • npm (or yarn) version: yarn 1.16.0

Relevant code or config

          <input
            {...getInputProps({
              onKeyDown: event => {
                if (event.key === "Enter") {
                  // Prevent Downshift's default 'Enter' behavior.
                  // error: Property 'preventDownshiftDefault' does not exist on type 'KeyboardEvent'.ts(2339)
                  event.nativeEvent.preventDownshiftDefault = true;
                }
              }
            })}
          />

What you did:

Included the code above

What happened:

TypeScript error because the type of event is inferred to be a React.KeyboardEvent<HTMLImputElement>, which is missing that preventDownshiftDefault field

Reproduction repository:

<!-- If possible, please create a repository that reproduces the issue with the minimal amount of code possible. -->

Problem description:

The type of the event in the callback of onKeyDown's nativeEvent field, should include preventDownshiftDefault as a boolean

Suggested solution:

It's rough because React.KeyboardEvent is defined as:

    interface KeyboardEvent<T = Element> extends SyntheticEvent<T, NativeKeyboardEvent> {
    // ...

That NativeKeyboardEvent field needs to be edited to include it, but it's not configurable in KeyboardEvent. So React's typings ought to have some way to modify that before this can be resolved in a kosher way.

downshift-js/downshift

Answer questions osdiab

For now, the workaround is to use a type suggestion on event.nativeEvent, like (event.nativeEvent as any).preventDownshiftDefault = true.

useful!

Related questions

TypeScript compiler error with ref passed from getInputProps to component using a forwardRef hot 2
Double rendering (Lifecycle hook scheduled a cascading update) after item selection hot 1
Errors "You returned a non-DOM element. You must specify a refKey in getRootProps" hot 1
Support RefObjects for sub-components hot 1
Apollo with debounce example - downshift hot 1
Switching between controlled and uncontrolled input hot 1
source:https://uonfu.com/
Github User Rank List