Icon for a select does not change color when focused

[mercurus]

When including an icon in a select the documentation instructs us to use the following HTML.

<div class="control has-icons-left">
  <div class="select">
    <select>
      <option>My</option>
      <option>Choices</option>
      <option>Here</option>
    </select>
  </div>
  <div class="icon is-small is-left">
    <i class="fas fa-globe"></i>
  </div>
</div>

When looking at the actual CSS in Bulma it looks like this.

.control.has-icons-left .select:focus ~ .icon, 
.control.has-icons-right .select:focus ~ .icon {
  color: var(--bulma-input-icon-focus-color);
}

But the .select class is assigned to a wrapper element, not to the select itself. So when the select is focused the icon does not change color.

I'm using the following workaround, which you may consider using for fixing this issue.

.control.has-icons-left .select:has(select:focus) ~ .icon, 
.control.has-icons-right .select:has(select:focus) ~ .icon {
  color: var(--bulma-input-icon-focus-color);
}