Feature Request: Allow users to define event listeners for the search bar

[alfalfasprout]

Hello,

Thank you for creating and maintaining this package! My team and I use it within our application and have found it very useful.

We would find it super helpful to be able to define event listeners for the search bar in the Picker component. We'd like to stop some event propagation triggering keyboard shortcuts in our parent app, but are unable to do this as the Picker component is contained in a shadow DOM.

What is the process for contributing to this package, and what's the average time it takes to get a feature integrated if I make a PR for it? I am happy to contribute to this package myself, but need an idea of timeframes to report back to my team so we can make sure it aligns with our planning.

Thank you!

[Chinimala]

Hello, this package seems no longer maintained / the issues/PRs are not reviewed.

However, at the place you define keyboard shortcuts in the parent app, in the keyboard event listener, you can stop the process if event.target.tagName === 'EM-EMOJI-PICKER'.

And if you want to define new shortcuts inside the emoji picker search input for example, you can do:

const picker = new Picker(...);
setTimeout(() => {
  picker.shadowRoot.querySelector('.search input').addEventListener('keydown', () => { /* your event listener */ }, true);
});

That's how I added a new shortcut to close the emoji picker from inside.

[alfalfasprout]

Hello @Chinimala, thank you so much for this comment! I did end up doing pretty much this, but was looking for a better solution. Have a lovely day!