Empty options on select element on Safari browsers

When I published our currency converter widget to NPM I saw that all the options where missing on my Iphone on my Safari browser. And I thought I would share how I fixed it, and what I was doing wrong so that I perhaps can help someone out there with the same issue.

Image of my bug

This is what my bug looked like on my phone

What I was doing wrong

Below is an example of how I was doing it at first, which worked fine in Chrome browsers. However, it turns out Safari doesn't read the "label" value here.

<select>
  <option label="My label" value="Some value" />
  <option label="Another label" value="Some other value" />
</select>

Simple fix

So, to be on the safe side of things, just throw your labels as a child to the option to make sure it will show correctly.

<select>
  <option label="My label" value="Some value">
    My label
  </option>
  <option label="Another label" value="Some other value">
    Another label
  </option>
</select>

Outro

All right, so this was a super short post, but I thought I just throw it out there and hopefully it could help someone out there with similar issues.

Thanks for reading!