React-Downshift - How to prevent clear by Escape key?

Question

I am using React open source component Downshift to build my custom dropdown.

The problem I am facing is that Downshift clears selected item (and calls the onChange callback with null) when user presses Escape key.

This clears my dropdown even though my dropdown does even not have an empty option.

How can I suppress this behavior and make it just close the opened dropdown (if it is open) and not to change the value.

Answer 1

I guess I just figured it myself: I added a state reduced overriding default behavior:

  const stateReducer = (_, changes) => {
    switch (changes.type) {
      // Preventing from clearing value once ESC is pressed
      case Downshift.stateChangeTypes.keyDownEscape:
        return { isOpen: false };
      default:
        return changes;
    }
  };

  <Downshift stateReducer={stateReducer}>{/* your callback */}</Downshift>