[Select] Inability to stop Escape keyDown propagation

Bug report

If there’s a keydown handler defined above select component, there’s no way to prevent event propagation when Escape is pressed but keep closing the select as expected.

See reproducible CodeSandbox example

Current Behavior

The only way to prevent event propagation is to define

<Box onKeyDown={(e) => {
   if (e.key === "Escape") {
      console.log("this should not be called");
   }
}}>
  <Select>
    ...
    <SelectContent
       onKeyDown={(e) => {
          if (e.key === "Escape") {
            // propagation stopped and Box onKeyDown is not called
            // but Select is not closed either
            e.stopPropagation();
          }
        }}
    />
    ...
  </Select>
</Box>

but it breaks “close select when Esc is pressed” fuctionality.

Expected behavior

I can prevent Box onKeyDown event from being called, but still keep closing Select when Esc is pressed.

Reproducible example

CodeSandbox Example

Your environment

Software	Name(s)	Version
Radix Package(s)	react-select	0.1.1
React	n/a	17.x
Browser		Chrome

[suevalov]

So, I solved the problem with a generic attribute that I added to SelectContent and SelectOption components, this an event is targeted from these elements it gets skipped in a global shortcut handler.

So, the new Select is coming to Linear. We already use Tabs component and more to come. Thanks for an amazing library.

[suevalov]

@benoitgrelard these are good ideas, thanks for sharing. I’ll explore these possibilities