Add emojis to input

Question

I am building a chat and I am using a library called emoji-picker-react and I want to add emojis to my text field and then send it as a message. I am using react so I will simplified the code for convinience. My messages are working but my emojis not so much. So far, if I click the emojis first and follow with some text, is fine. But if I type first and I try to add the emojis it won't work. Also, if I try to send emojis on its own, it won't work either. This is what I used to add emojis on my text field and both do the same.

This is where I try to add the emojis into my text field and is doing what I just explained:

const onEmojiClick = (e, emojiObject) => {
document.querySelector("#text").value += emojiObject.emoji
  // document.getElementById("text").value += emojiObject.emoji
};

And this is my input field:

<input
 id="text"
 style={inputStyles}
 type="text"
 placeholder="Type your message"
 value={message}
 onKeyPress={e => {
  if (e.key !== 'Enter') return;
    sendMessage(message);
  }
 }
 onChange={e => setMessageForm(e.target.value)}
/>

I am sure is something simple but can't get my head around it. I hope someone can guide on this.

Thank you!

Answer 1

A little update to @lissettdm's answer.

Common issue when inserting emojis.

after inserting emoji, the cursor will move to the end of the line.

Improved answer

The cursor stays where the emoji is so the user can input multiple emojis.

 const ref = useRef(null);
  const onEmojiClick = (event, emojiObject) => {
    const cursor = ref.current.selectionStart;
    
    const text = message.slice(0, cursor) + emojiObject.emoji + message.slice(cursor);
    setMessageForm(text);
    
    //Codes added for the new cursor
    const newCursor = cursor+emojiObject.emoji.length
    setTimeout(() => ref.current.setSelectionRange(newCursor,newCursor), 10)
  };

Code explanation

Depending on what emoji package you use, emojiObject.emoji may be unified, native or id. The common mistake and biggest mistake is to presume 1 emoji = 1 character (cursor+1), which is not the case.

For example if you are using emoji-mart, and you use emoji.native, the length is 2 ( not 1 ).

const newCursor = cusor+emojiObject.emoji.length

The following set the new cursor position to be after the emoji. Why the timeout? It's to allow setMessage(text) ample time to update the dom with the new value, before you use the ref to set cursor.

If you do not use setTimeout, the cursor may not be updated correctly.

setTimeout(() => ref.current.setSelectionRange(newCursor,newCursor), 10)