Customize Combobox "Enter" keypress handling

[calthomson]

Back again. Once more, thanks for this library, and the great support of it!

---

TL;DR: Is there any way to control/customize the Combobox onEnter handling?

I recently asked a question about "how to keep the combobox open in order to select multiple inputs" (see here), and was pointed to this new PR which allows for this: #1243

Now I'm running into a different issue. The scenario is this: I have selected all desired inputs and I want to submit my choices now with an Enter key press.

I don't have any dropdown option selected, therefore the combobox is not handling my Enter keypress with the Combobox onChange (which is what is called each time I hit enter, when an option is selected). I also am not able to capture it with a global event listener, because the Combobox keypress handling is getting in the way (I assume).

document.addEventListener('keydown', function (event) {
    if (event.key === 'Enter') {
      // This does not work when the Combobox is the active component.
      console.log("Enter pressed");
    }
  });
  

Here is a visual. See that I have no option selected at the end. This causes the Combobox onChange to not get called when I hit enter. The global enter also doesn't capture the key presses I'm doing at the end.

[calthomson]

In the end I was able to capture the Enter key press events with a global event listener after all.

To be honest, I'm not sure exactly what I did differently but I believe I was just running into some unrelated issues regarding the keypress events. In the end, this worked fine for me, I was able to add my own key press behavior on top of the regular "select on Enter" behavior that comes with Combobox:

const handleKeyUp = (event: KeyboardEvent) => {
  if (event.key === 'Enter') {
    console.log("Enter pressed");
  }
}

useEffect(() => {
  document.addEventListener('keyup', handleKeyUp);

  return () => {
    document.removeEventListener('keyup', handleKeyUp);
  };
});