Post

I don’t think a new input type is needed for emoji input. Modern keyboards already supports emojis to use in a text input. We should just able to hint a keyboard preference like we do for numeric inputs. Using inputmode makes more sense.

That wouldn’t do anything on systems with a physical keyboard though.

I'm wondering what the use case would be? Some kind of reaction... But if you want to limit to certain emoji only, then a custom select might be a better fit? I cannot make it make sense for inserting emoji in text content though. So right now, I'd go with nay.

For limited options, the custom select would be a good solution indeed. The thing I am thinking of is this one right here: on top of a set of predefined options, you can also chose _any_ emoji. Instead of having to build your own emoji picker, it’d be nice to just trigger the native one.

In both case, custom select or emoji input in your example... Isn't the bigger complexity to actually get the selected emoji and insert it at the right place in the text box? I wonder if a new value for the inputmode attribute with a natively implemented picker wouldn't make more sense? 🤔

<input inputmode=emoji pattern="\p{RGI_Emoji}"> 😎 Kidding. An <input type=emoji> would mean we could implement all those "reaction pickers" from slack or discord using .showPicker() right? (well, of course, slack and discord have custom emojis so they would still use their own pickers anyway)

generic icon picker input with emoji mode plz

maybe we could add custom emoji with a <datalist>

I thought about it too, but custom emojis are images, not \p{RGI_Emoji} strings.

<emojipicker> or riot...

No new input types!

Also it would fallback to a text input in unsupporting browsers which is quite different to what is desired imo. Tbh I think a window.showEmojiPicker() is probably a good first step anyway. Give people a JS way to invoke it and use the selected character somehow?

Mnay... As in "maybe tilting to nay". I believe there are a lot more important things we need at the moment. The use case seems limited (maybe web versions of chats?), or am I missing something?

This is the use case I am thinking of: a reaction picker with a predefined predefined set of options (custom select, or a popover) that also allows you to chose _any_ emoji on top. Clicking that + would trigger the emoji picker.

Yes! But a lot of corner cases to work out, like ZWJ on one platform that aren't supported on another, so a single emoji can become several. Like 👨🏻‍👩🏿‍👦🏽 might be 1, 3, 6 or 11 emojis depending on the platform support.

That would all be taken care of because `<input type=emoji>` would trigger the native emoji picker which would be responsible for that.

I think the pain is on the render side - I add the complex ZWJ emoji on a platform that does support it, then it gets viewed on a platform that doesn't. Does it show its best guess? Does it show ZWJ placeholders? What does it POST on resubmit? All solvable, just... messy.

big aye

Got any specific use-cases / UI patterns in mind?

Some considerations: - Reactions, or e.g. GitHub's comment box textarea allows emoji (picker opens with `:`). So maybe primitives to enumerate emoji would be better? - Many sites (slack, masto, github) have custom emoji. How do they get displayed? Slack can't use private space due to size.

AFIK many reaction pickers offer a set of fixed choices, and can allow picking an emoji from the whole set. See this Google Chat screenshot. I think that + icon there could be an `<input type=emoji>`, triggering the native emoji picker. I think custom emoji are a related but separate problem.

YES PLEASE YES Emojis are *SO DIFFICULT* to get right - and there's no canonical way to ask "what emojis are natively available on this platform?". The amount of implementation detail in userland solutions is *absurd*. Modifiers such as skin tones! Platform support! keyword searches! 1/🧵

I made a whole "emoji-platform-data" library to try to track what emojis are available in each platform, and what their metadata is. There are *SO MANY ODDITIES* between them. E.g., take 🧮. If you search "math" should that come up? * Fluent (MSFT): no * Gemoji (GitHub): no * Twemoji (X): yes 2/🧵

Plus, consider the difficulty of trying to get the right emojis at all across different platforms. We couldn't even find out how to access the Mac data at all (in the last few macOS versions), let alone make a system to get the right emojis for the user's OS! github.com/JoshuaKGoldb... 3/🧵

Picking *one* emoji feels pretty constrained. It maybe works for reactions, but you can't really use it in a free text input. I'd want something a little more flexible than that if possible.

That seems like a parallel feature to trigger the native emoji picker from script?

Potentially. I'm mainly thinking of a text input whereby you can easily add multiple emojis (not unlike Bluesky's UX). Maybe we can compose an `<input type="text">` with an `<input type="emoji">` in the correct manner.

Hmm. I try to think of a situation where picking an emoji is its own input instead of just part of an text input or text area. Sound more like command (invoker) for a textarea element.

Nay. IMO accessing emojis should be a subfeature of <input type="text"> or <textarea> or [contenteditable].

But that would still require you to trigger the picker (from script) somehow.

Yes, but: Make sure that the site can customize the font so you're actually picking emoji that look like what will be inserted. Don't require an input so sites can implement popup shortcuts, like :smile:

What I’m mainly looking after with my thought, is a way to show the native emoji picker from within a webpage. This could as well be a call to something like `window.showEmojiPicker()`, but I’m more fond of an input because then you have `change` events and such.

The native UI for picking emoji is pretty nice, and I doubt it’s feasible for that to use a website’s custom emoji font. Shouldn’t be a considered a dealbreaker imo.

I suppose you have a sort of reaction UI in mind, right? Where I press on the emoji icon (or the emoji type input), select an emoji, and then that's my reaction? Then the input would have to specify which emojis are allowed. Besides, this scenario doesn't treat emojis as text but instead enums.

...and then? Will it be an input where I can only pick and have emojis? Will it function like a file picker where I picked an emoji and now I... reference it somewhere? The issue with this is that emoji are just special characters. They are a pat of a larger text, and we've got inputs for that.

I assume this would work the same as `<input type=number maxlength=1>` where the input limits both the available character range and the number of characters.

That still won’t allow you to trigger the native emoji picker, though :-/