Trigger the emoji picker without clicking the emoji picker button.

[hiromijorge]

i want to hide default emoji picker button and use my own button as emoji picker button but im stuck now, what i have tried:

1. i tried to trigger button.click() by getting element using getElementById (Not working)
2. try using the buttonElement Props and try passing the HTMLElement, for example:buttonElement={<p>Button</p>}(Also not working)

GOAL: I need to trigger emoji picker button without clicking the default emoji picker button

[cesarwbr]

@hiromijorge, to pass a reference of the EmojiArea to the InputEmoji component, you can use the useRef hook. However, ensure that the EmojiArea component is rendered before the InputEmoji component. Here's an example:

function App() {
  const emojiRef = useRef(null);

  return (
    <>
      <EmojiArea ref={emojiRef}>
        <EmojiIcon height={20} width={20} />
      </EmojiArea>
      <InputEmoji
         buttonElement={emojiRef.current}
       />
    </>
  );
}

Also, make sure that the EmojiArea component properly forwards its ref if it's a custom component. If it's a functional component, you might need to use React.forwardRef.

[hiromijorge]

@cesarwbr Hey cesar, thanks for your reply but unfortunately I still can't fix it.

My code:

const emojiRef = useRef(null);

        <InputEmoji
        class="textInputEmoji"
        shouldReturn
        onResize={inputEmojiResize}
        style={{whiteSpace: 'pre', height: `${textboxHeight}px`, width: '220px !important'}}
        onKeyDown={handleKeyDown}
        value={text}
        onChange={inputEmojiSetChange}
        cleanOnEnter
        placeholder="Type a message"
        borderRadius="0"
        borderColor="transparent"
        buttonElement={emojiRef.current}
      />

               <img
                ref={emojiRef}
                id="emojiPicker"
                onClick={emojiIconClick}
                src={props.baseURL + "asset/ic-emoji.svg"}
                alt="Picture of the author"
                width={24}
                height={24}
                style={{ cursor: "pointer", marginLeft: 5, marginRight: 5 }}
              />

i tried to inspect the<img/>element and saw that this is inside the <img/> element:

<div class="react-emoji-picker--container"></div>
<button type="button" class="react-input-emoji--button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="react-input-emoji--button--icon"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"></path><path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"></path></svg></button>

My question is, what i have to do next so when i click the custom emoji element the emoji picker will shown

[cesarwbr]

Hi @hiromijorge! I've introduced a new prop named buttonRef that allows you to pass a React mutable ref object directly. Please let me know if this resolves the issue for your use case.