Code Highlighting Example - Select dropdown option text is included in text selection

In the code highlighting example, selecting the text of the document also selects the text of the dropdown options.

Issue demonstration

This occurs because the Select element gets wrapped up into the selection. This occurs even if you set the element’s CSS to user-select: none;

I’m running into issues related to this issue in my application. Is there some way to exclude items like this from the selection? If not, is there a better way to go about rendering elements like this in the editor?

[Slapbox]

Hey Ian, thanks for the response. I considered the contentEditable approach, but that would lump in images and potentially other things like checkboxes which we don’t want to filter out.

I’ve determined conclusively there is no way around it with styling. Even display: none does nothing. At first I was absolutely baffled by this, but after spending the day poking around cloneFragment, it makes perfect sense.

cloneFragment is filling the text/html object in the clipboard with div.innerHTML, meaning as long as something appears in the HTML, it’s going to appear in the clipboard no matter what we do with styling. We can strip objects that should not be included out of the selection prior to this step either via a custom function, the serializer, or via building the text/html contents some other way.

[ianstormtaylor]

Interesting, I’m not sure. Portals probably? But I’d be curious if someone found a way without portals too since they are often a pain to manage.