CODEWITHSUNDEEP
javascripthtmltwemoji
ahmed-el-awad
ahmed-el-awad

Reputation: 53

Twemoji doesn't render on options dropdown

I am using twemoji to display emojis and I found it working well, but when using the options tag, it renders the default emojis instead of twemoji.

Here's an example code

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
<body>
  <div style="display:grid; grid-template-columns: 1fr 1fr 1fr;">
    <div>
      <p>😍</p>
      <select>
        <option value="love">😍</option>
      </select>
    </div>
    <div>
      <p>😎</p>
      <select>
        <option value="cool">😎</option>
      </select>
    </div>
    <div>
      <p>😭</p>
      <select>
        <option value="sob">😭</option>
      </select>
    </div>
  </div>
</body>
<script>
  twemoji.parse(document.body);
</script>

The emojis displayed on top are what I expect to see, and below is the unintended result.

How can I make it so that it renders the twemoji emojis instead?

I looked up on Google and StackOverflow to see if this problem happened to anyone else, but wasn't able to find a similar question.

Upvotes: -1

Views: 98

Answers (1)

jjoaovitor7
jjoaovitor7

Reputation: 17

The HTML Element option don't supports images, only text, and yes, in a way emojis are text.

For POC (Proof of concept):

twemoji.parse(document.body);
twemoji.parse(document.querySelector("select option[value='love']"));
twemoji.parse(document.querySelector("select option[value='cool']"));
twemoji.parse(document.querySelector("select option[value='sob']"));
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script>

<body>
  <div style="display:grid; grid-template-columns: 1fr 1fr 1fr;">
    <div>
      <p>😍</p>
      <select>
        <option value="love">😍</option>
      </select>
    </div>
    <div>
      <p>😎</p>
      <select>
        <option value="cool">😎</option>
      </select>
    </div>
    <div>
      <p>😭</p>
      <select>
        <option value="sob">😭</option>
      </select>
    </div>
  </div>
</body>

But you can try without the option, for example with Dropdowns from Bootstrap.

Upvotes: 1

Related Questions