JS API to trigger the platform native emoji picker

There was a previous discussion here: Invoke emoji input but it focused on changing the input elements.

What I’m thinking of is, have a simple API call that would open the native emoji picker, in response to a click event.

Chrome already exposes a way of opening the emoji picker by having an emoji option in the context menu on inputs. https://9to5google.com/2018/04/05/google-chrome-emoji-shortcut-mac-windows/

With how complicated the emoji/unicode has gotten, especially in last couple of years, it seems like a great idea to delegate this job to the operating system, rather than having to implement it in javascript yourself, which requires a big amount of data with the emoji data/information.

I would suggest to add a simple emoji attribute on input and textarea instead of providing a complex API.

For example:

<input type="text" required emoji></input>

When the attribute is present, then there is a small icon to select emoji… like Emojionearea.

With an attribute I’m worried it will hard to style whatever button the browser ends up adding. And it will be even harder to move outside the input if needed (for example the smiley/emoji button on discourse here).

I don’t know about other OSs, but on MacOS at least, it’s a simple keyboard combination to bring up the emoji selector… I guess if you wanted to show a restricted set, you could still just make a custom UI using the array of emojis to display. This really seems like a job for Web Components, to be honest.

Not everyone is aware of the keyboard combination (especially on Windows when it was just added recently), it’s also helpful on mobile where it would open the emoji panel directly.

Making a custom UI is specifically what I mentioned in the initial post already. There’s many emojis, and to make an effective searchable emoji panel, you need to have a lot of metadata about emojis, which gets even bigger when you consider modifiers.

That won’t work for applications like Twitter and Facebook, who already have a button for explicit emoji input. A lot of places do just that on desktop where there’s no obvious “input emoji” key/button, so they can still easily add one in if they don’t know the keyboard shortcut.

Hey there,

I came through a same issue and as far as I can see there is no JS API for this so far, even though chrome seems is able to “open” this native emoji picker.

I do not think we need a <input emoji /> attribute, but what would be great is to have a simple API like

navigator.EmojiPicker.open()

or something like this. Is anyone still interested in this topic? Maybe suggesting it to the ECMAScript Team or something.

That won’t work for applications like Twitter and Facebook, who already have a button for explicit emoji input.

My solution would work in that case… If they really want to use their custom input for emoji, they can simply avoid to add the emoji attribute to the input.

I do not think we need a <input emoji /> attribute

I think that the HTML attribute would be straightforward and would cover 99% of use cases. Usually you need to add an emoji to an input field, not somewhere else. In any case also a JS method would help.

I hope that Chrome and others will consider this feature, because it would be easy to implement (i.e. it’s simple for them to open the native OS picker) and it would save a lot of a headaches to developers.

I also have another concern with the JS API solution: what about the position of the cursor in the textarea? When you click on the button to open the emoji selection you lose the focus / position of the input in the textarea.

There are OS pickers on all major platforms:

• MacOs: Cmd+Ctrl+space
• Windows: Windows+.
• Ubuntu: Ctrl+.
• etc.

The problem is that most users don’t know about those strange key combinations… It should be simple to open that native picker for the browser.

I still believe that this feature would be extremely useful and it would improve the UX.

Most JS emoji pickers are complex, not accessible and not well maintained.

All major browsers and OS already have this feature (emoji picker), they just need to expose it to the developers.

It’s meaningless to keep this powerful feature hidden behind keyboard shortcuts that users don’t even know.

I think attribute isn’t the right way but instead as @madebyfabian suggested a JS API. I’m thinking this mainly because what about textareas and contenteditable divs? That’s where most of the emoji needs to be inserted anyways, in big areas of text input and not just basic input fields which are mainly used for short data such as e-mail and usernames.

Another vote of support for an <input type="emoji">. The benefits over ad hoc ones are consistency, accessibility, even i18n. For use cases where an emoji needs to be appended to another form element’s input, the input can just be overlaid and/or its input event listened to with JS.

When I suggest to add an attribute to input fields, I mean to add it to input and textarea, just like other attributes that are common to all form elements.

I understand that, but an attribute showing a visual icon to open the emoji picker box is not the best solution.

I’m mainly saying that given browser vendor history - fancy input fields are very inconsistent. See color picker, date picker, and number picker.

For example, there are some things to take into account here. What about the icon position - should it be fixed, or should you be able to set it manually with a CSS property?

Suppose you’re allowed to set a position manually; what about the padding then? Should text go over the icon, or should text areas automatically get padding once in the emoji state?

On top of everything, how are you supposed to add the icon for Bold, Italic, and Underline in rich-text editors? Should you force people to put their icons close to the immovable emoji icon?

That’s just for position. What about the icon itself? Can you replace it with a different one? Can you change the size? Anyways, this is all that I can think of in a short amount of time. I’m sure there are lots of edge cases where browsers might not deliver consistently.

I love the request, and it’s very nice as I’ve built a WYSIWYG editor myself, and I’ve manually created an emoji solution.

But it seems an attribute points to an overly complicated solution. DIYing the icon and hooking it up with a javascript API seems perfect.

Just my opinion.

Let’s keep this discussion open. It’s 2022 and I still think that browsers should provide a simple way to have an emoji picker associated to an input field.