Switch and Checkbox labels stop working when a text is selected anywhere on the page

What is affected?

Component

Description

I am not sure if this is related to #5108 or not but this is much easier to reproduce:

https://github.com/material-components/material-web/assets/6388546/128fcf65-e4a4-4847-9cab-33c865fd8a7d

Whenever there is a text selected anywhere in the page (in my app, a text-field content was being selected), the label of md-switch and md-checkbox would stop working. Interestingly md-radio works correctly. In the video, a standard <input type="checkbox" /> is showed where it simply deselect all selecting texts on clicking. Sorry I couldn't show that I was clicking but you could see the first click does provide a visual indicator (the switch changes color a little bit but it doesn't change state).

Reproduction

Lit Playground with md-checkbox, md-radio and md-switch.

Select a text on the label or inside the text-field, then try clicking the label text.

Interestingly, I also cannot reproduce this on Firefox, similar to #5108 but on Firefox, sometimes clicking the Label would deselect the selected text and sometimes it does not, nevertheless, the components work correctly.

Workaround

None that I know of.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.0.1

Browser/OS/Node environment

Microsoft Edge
Version 118.0.2088.76 (Official build) (64-bit)

Start with the linked Lit Playground reproduction in Microsoft Edge, comparing md-switch and md-checkbox with md-radio and the native checkbox after selecting text. Trace the relevant component behavior and add a regression check; done means the switch and checkbox labels respond correctly after text selection without breaking the other cases.