Select option labels are invisible

I have the same problem. The solution proposed in the fork cshs-3258226, solve the problem.

I attach the patch from the fork cshs-3258226

Running into the same issue on Chrome, Firefox, and Edge. #5 resolved this for me.

Same issue on Chrome and Edge. Applying #5 patch to 3.x-dev has fixed the issue for me. Not sure when the problem started occuring, however it's likely due to a recent browser update.

We ran into the same issue with Chrome and Edge.

+1

That's really weird. For some reason, it works for me with the innerText and always was.

Can someone elaborate, was it worked before and suddenly stopped or have never worked before?

@BR0kEN I noticed this suddenly when clients started to report it, so maybe it was a browser change?

In my case there's only a problem when the field starts hidden (I use cshs along with menu_link_weight and, when adding a new node I get this problem because the menu select list starts hidden). And it seems normal to have an issue in this case when using innerText because it will get the element text as presented to the user. If the field starts hidden, there's no text presented and that's why innerText has empty values.

The provided patch would also work with textContent which gets the raw textual content inside an element, even if its not visible for the user.

Could replicate the issue after update to latest release.
"drupal/cshs": "^3.5"
Issue is replicable on Latest Chrome.
Attached screenshot of Before and After.

Patch provided https://www.drupal.org/project/cshs/issues/3258226#comment-14365871 works for me.

Yeah, that's according to the spec https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent.

I wonder why I'm not seeing this behavior in any browser on macOS and iOS.

  <style>
    #test {
      display: none;
      text-transform: uppercase;
    }
  </style>
  <select id="test">
    <option value="one">Item 1</option>
    <option value="two">Item 2</option>
  </select>
  <script>
    const test = document.querySelector('#test');

    console.log(
      test.options[0].text,
      test.options[0].innerText,
    );
  </script>

Given the above code, both text and innerText are the same.

Anyway, I tend to commit the patch.

Committed to 8.x-3.x. Thanks.

Just wanted to say thanks for the quick fix and commit :)

Ran into this as well after latest Chrome update. Thanks for the patch!

Can this get pushed into a release so I don't have to use the dev version in prod please?

Something weird happened for me, on installing the stable version and configuring the field for the first time it worked perfectly, I could see the labels, then all of a sudden they disappeared. Very weird!

One thing I did notice is that upon trying to debug the JS, chrome doesn't use the jquery file supplied by drupal, it instead uses this file:
webpack://cshs/src/jquery.simpler-select.ts.

I confirm the dev version has this fixed but as stated above, would like to avoid having this in prod.

Thanks in advance!

I'll do a release in a moment.

chrome doesn't use the jquery file supplied by drupal, it instead uses this file:
webpack://cshs/src/jquery.simpler-select.ts.

This called source maps. They allow to map JS code to the actual source it's transpiled from, which is TS. Very handy for debugging in IDE and DevTools.