bug(datepicker): Hitting space key to select date reopens picker on Firefox

[lmsch]

Reproduction

Steps to reproduce:

1. Open https://material.angular.io/components/datepicker/overview with Firefox.
2. See first example on page ('Basic datepicker'). Press button to open the picker.
3. Try pressing space key to save the date.

Expected Behavior

Should save the date and close the picker.

Actual Behavior

Datepicker closes then instantly reopens.

Environment

Firefox v90.0.2

• Angular: v10.2.x, but also present in v12.1.x
• CDK/Material: v10.2.x, but also present in v12.1.x
• Browser(s): Firefox v90.0.2
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[crisbeto]

I spent some time investigating this and it's tricky to solve correctly. It looks like we're hitting a bug in Firefox where calling preventDefault on a spacebar press doesn't interrupt the click event sequence (see https://bugzilla.mozilla.org/show_bug.cgi?id=1487102).

A couple of solutions I tried:

Handling the spacebar in keyup instead of keydown

This somewhat works, but it has a couple of issues:

1. Calling preventDefault has to happen in keydown, otherwise the browser behavior won't be prevented. This is a little annoying because we'd have to bind two events, but it's not a big deal.
2. It introduces a similar issue when opening the datepicker using the spacebar. Since we move focus into the calendar as soon as the datepicker is opened, handling keyup means that selection can happen within the same sequence of events.

Delaying focus restoration

This also works, but not very well. E.g. if the user holds down their finger on the spacebar for a longer period of time, the bug can still happen.

I also tried delaying it until the closing animation is done, but that has the same issue as a setTimeout.

Preventing any interactions until focus actually moves

This works and solves all issues with the two approaches above, but it'll break a ton of tests for people.

[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.}