search

shoelace-style / shoelace

A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇
https://webawesome.com
MIT License
12.62k stars 802 forks source link

Drawer content/text sometimes not selectable in Chromium based browsers #2134

Open pixelbucket-dev opened 1 month ago

pixelbucket-dev commented 1 month ago

Drawer content/text not selectable in Chromium browsers

When using any Chromium based browser, I sometimes cannot select the content I pass to the drawer.

This is using the drawer in an Angular 12 app. I pass another component to the drawer. That component contains components from the same app plus ng-zorro components.

With "select" I mean the user action of selecting text with the mouse. Obviously, this is a huge show-stopper because selecting text is a basic UX requirement in most apps.

The funny thing is that the drawer header can be selected and if you start to drag with the mouse in the header, the text in the content part can also be selected.

This only happens in Chromium-based browsers. Safari and Firefox do not reveals this bug.

To Reproduce

Since this is an Angular production app I cannot disclose code. It is also on an old Angular version (v12). I tried to reproduce it in an Angular starter app (v18), but there everything seems to work fine. However, it's not really comparable because the library and component stack are so different.

Demo

Interestingly, even in your docs you seem to have that issue. Try using a Chromium-based browser (I used Edge) and you will notice the behaviour described above. The only difference is that double-click selection works in your docs example. But drag selection doesn't work either. This makes me believe that it is not just an isolated bug with our particular Angular app.

Screenshots

Not possible, sorry.

Browser / OS

claviska commented 1 month ago

Thanks for the report. Unfortunately, this is a Chrome bug that I reported in October 2021.

https://issues.chromium.org/issues/40800208

To anyone affected, please VOTE and STAR the bug as I'm told it helps bugs get recognized and assigned.

There is a workaround, at least, as it only seems to affect text nodes. If you wrap your slotted content in a <p> or another element, the ability to select gets restored.

claviska commented 1 month ago

I'm not sure if this will get it any traction, but I've put up a $250 bug bounty.

pixelbucket-dev commented 1 month ago

Thanks for the report. Unfortunately, this is a Chrome bug that I reported in October 2021.

https://issues.chromium.org/issues/40800208

To anyone affected, please VOTE and STAR the bug as I'm told it helps bugs get recognized and assigned.

There is a workaround, at least, as it only seems to affect text nodes. If you wrap your slotted content in a <p> or another element, the ability to select gets restored.

Thanks, I have commented on the bug tracker. Incredible that this bug hasn't been addressed for such a long time.

I will try your proposed approach with the p tag soonish, though I don't like such hacks. In the meantime I went back to using ng-zorro, which is not too nice either.