MatAutocompleteHarness doesn't open on `focus()` or `getOptions()`

[pfeileon]

Is this a regression?

• Yes, this behavior used to work previously

The previous version in which this bug was not present was

Puppeteer 23.1.1

Description

I guess somewhere between Puppeteer v. 23.1.1 and 23.3.0 Chromium must have been changed in a significant way.

Seems to be this bug again: #23757

Also routerHarness.fixture.nativeElement.querySelector(':focus') returns null while routerHarness.routeNativeElement?.ownerDocument.activeElement works.

Somehow these issues don't come up if the specific test is executed in isolation. It might depend on the order of execution.

Environment

Angular 18.2.3 / Jasmine 5.3.0 / Karma 6.4.4 / Puppeteer 23.3.0 / Linux

[crisbeto]

Somehow these issues don't come up if the specific test is executed in isolation. It might depend on the order of execution.

My experience in cases like this is that sometimes Chrome doesn't set focus if the tab isn't in focus. It's possible that in your test environment something moves the Chrome window to the background (e.g. multiple test runs happening in parallel).

[sOnU1002]

The MatAutocompleteHarness is not opening when invoking the focus() method or calling getOptions(). This regression appears to have emerged after updating from Puppeteer version 23.1.1 to 23.3.0, potentially linked to how Chromium manages focus.

Steps to Resolve
Ensure Proper Focus Handling: When calling focus(), ensure that it is awaited properly to guarantee that the focus is set before any subsequent actions are taken.

typescript
await matAutocompleteHarness.focus();

Verify the Active Element: After focusing, check that the correct element is active. Use ownerDocument.activeElement to confirm which element is currently focused.

typescript

const activeElement = matAutocompleteHarness.element().ownerDocument.activeElement;
console.log(activeElement); // Verify this is the expected input element

Run Tests Sequentially: Since issues arise when tests run in parallel, ensure that tests are executed sequentially to maintain focus consistency. Use the --single-run flag when running tests to limit test execution.

ng test --single-run
Update Puppeteer and Related Packages: Ensure you are using the latest versions of Puppeteer and Angular testing utilities. Updating these packages can often resolve compatibility issues.

npm install puppeteer@latest @angular/core@latest @angular/material@latest

Check for Focus Interference: If other tests or actions interfere with focus, isolate your tests better. Structure your test cases using describe and it blocks effectively to ensure that focus state does not leak across tests.

typescript

describe('MatAutocomplete Tests', () => {
it('should open the autocomplete on focus', async () => {
await matAutocompleteHarness.focus();
const options = await matAutocompleteHarness.getOptions();
expect(options.length).toBeGreaterThan(0); // Check if options are available
});
});
Use Browser's Debugging Tools: Utilize the browser's debugging tools to inspect the state of the elements involved. This may provide insights into whether the focus is being set properly or if there are any DOM manipulations causing interference.

Fallback and Workaround: If the above methods do not resolve the issue, consider using a manual workaround by directly triggering the dropdown programmatically as a temporary measure while investigating the underlying cause.

typescript

await matAutocompleteHarness.open();
Raise an Issue with Detailed Findings: If the problem persists, document your findings, including version numbers, steps to reproduce, and any error messages, then report this to the Angular Material GitHub repository to seek further assistance.

[pfeileon]

const autocomplete = await loader.getHarness(MatAutocompleteHarness);
await autocomplete.selectOption({ ... });

Error: Unable to retrieve options for autocomplete. Autocomplete panel is closed.

Inserting await (await autocomplete.host()).click(); in between fixes the issue (.focus() does not).