bug(autocomplete): harness does not fire focusin event

[Nosfistis]

Reproduction

Use StackBlitz to reproduce your issue:

• Harnesses: https://stackblitz.com/edit/harness-issue-vtgyuf

Steps to reproduce:

1. Create an autocomplete test with harness
2. Focus the autocomplete via MatAutocompleteHarness.focus()

Expected Behavior

The input element is focused and the autocomplete options are rendered. They can also be queried in the DOM (e.g. check that an element with text "Choice A" exists). Dispatching focus via a harness should also dispatch focusin beforehand, so that it emulates properly the browser behavior.

Actual Behavior

The input element is focused, but the options are not open. This is because the autocomplete harness fires the focus event, while mat-autocomplete-trigger listens for focusin events, which are not triggered via the JS focus event.

Environment

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

[crisbeto]

It seems like focusin does get triggered when you call focus programmatically. See https://stackblitz.com/edit/angular-ivy-btn942?file=src%2Fapp%2Fapp.component.html.

[Nosfistis]

Indeed you are right. I am struggling to create a proper harness Stackblitz with the proper angular version though, so that Ivy is enabled. I will be back with a better reproduction.

Is it possible that jasmine does not emulate that behavior?

[crisbeto]

There's a checkbox in the Stackblitz settings to enable Ivy, but I don't think that's the issue since we're basically interacting directly with the browser APIs. We've seen similar issues like yours in some of our tests and they ended up being caused by the browser not moving focus if the browser window is blurred/minimized.

[Nosfistis]

Great tip! Indeed it was an issue of the browser running in the background. I have leaving the browser in the front and the test passed. I also tried with ChromeHeadless and it also worked!

[crisbeto]

It looks like we have some fallback logic that simulates the focus and blur events manually if the browser doesn't fire them, but it wasn't accounting for focusin and focusout. I've submitted #23757 to sort it out.

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