Add an optional search prop to picker

[tekbot]

I've added a slack-like mini picker using this package (which I love, btw, awesome work), such that when a user types a colon followed by an alpha character, we pop a mini picker and auto-focus it to allow the user to type all or most of their desired moji, and replace the text inline on selection, tab, or text completion.

All of that works great, except that if the user blurs mid-moji then continues typing, the text in the search bar has been blanked out even though the text in the chat entry remains unaffected. For instance, if a user typed ":hug" and blurred, then continued typing "ging" their search input would read only "ging" and they'd have hugging_face, and two shrugging emojis displayed in the search results.

It's easy for us to track the partial search, but the issue is we've no way to pass in that string as a prop to the Picker component. It would be awesome if there was a prop to Picker that got passed down to Search that kicked off the search using that string.

[wbharding]

I had been looking this weekend for this very feature. I want to allow a user to keep typing text into their main document, even after they've invoked the emoji picker. So if a user types ":hug", that content will be in their document, but "hug" will also be informing what the emoji picker box suggests.

If anyone knows how to hack in this functionality until an explicit api for it exists, that would be welcome also. :smile:

[forresto]

I found this workaround, to set a query from the "outside" of the custom element:

const pickerEl = document.querySelector("em-emoji-picker");
const pickerInputEl = pickerEl.shadowRoot.querySelector("input[type=search]");
pickerInputEl.value = "heart";
pickerInputEl.dispatchEvent(new Event('input'));

[jamesopti]

This would be very useful for us. Properly controlling the search query from outside requires a couple new APIs:

• Setting the query value
• Exposing a way to control the navigation and submission via Enter (to support keyboard controls from outside)

We're currently hacking this by reaching into pickerInstance.component?.refs?.searchInput?.current, which also requires a hack to hide the search input, which must be rendered in order for the first hack to work.

[albjeremias]

This would be very useful for us. Properly controlling the search query from outside requires a couple new APIs:

* Setting the `query` value

* Exposing a way to control the navigation and submission via Enter (to support keyboard controls from outside)

We're currently hacking this by reaching into pickerInstance.component?.refs?.searchInput?.current, which also requires a hack to hide the search input, which must be rendered in order for the first hack to work.

how do you exatly do this?

im working on a textarea with emoji selection.. would be awesome to be able to filter the emoji on the nice emoji cardboard

here's what i figured out till now https://stackblitz.com/edit/react-ts-wxsdl5?file=App.tsx

[Alex-ray]

+1 I also need this to build slack like emoji functionality within my editor.