bug(slider): Right click on a slider makes it permanently focused and unresponsive

[amakhrov]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The issue consists of two parts:

• The focus ripple stays forever after a right click. This equally applies to one-handle and two-handle sliders
• Two-handle slider only: right click on a handle makes the other handle broken - it no longer responds to mouse events, cannot be clicked/dragged

Reproduced in v15 and v16

Reproduction

Use the examples from the docs: https://material.angular.io/components/slider/overview#selecting-a-range
Steps to reproduce:

1. Right-click on a range (two-handle) slider. It will mark one handle as focused (ripple is displayed)
2. Close the context menu (by clicking outside)
3. Click anywhere else on the page, including other focusable elements
4. Go back to the focused slider and try to drag the other handle (which is currently not focused)

Expected Behavior

• After (3), the focus ripple disappears from the slider.
• In (4), you can normally click/drag the slider handle

Actual Behavior

• The slider's handle remains focused no matter what you do with the rest of the page.
• The other handle of the slider does not react to click/drag. Its interactivity only gets restored after I click on the focused handle one more time.

Environment

• Angular: 16
• CDK/Material: 16
• Browser(s): Firefox, Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}