Shadow dom support for autocomplete

[NorbertB29]

We have difficulties with the autocomplete directive running inside shadow root element, and we read in the Roadmap that you are planning to improve the shadow dom support.

🎯 Goals

We would like to use the [nxAutocomplete] directive in shadow dom.

📖 References

We recognized that the current implementation of the NxAutocompleteTriggerDirective directive uses the document.activeElement for functionality related to input change, blur and focus events, but the activeElement is set in scope of the shadow root.

Link to the current implemention

👌 Requirements

The directive should be able to use the activeElement inside shadow root as well.

ℹ️ Details

We have a suggestion about the improvement:

We could use the getRootNode() method, with composed: false option to access the host element's root node. It can return the Document or the Shadow-root element depends on where the related input field exists in the DOM. Also the NxAutocompleteTriggerDirective directive could define a getter to access the current rootElement like:

get rootElement(): Document {
    return this._element.nativeElement.getRootNode();
}

And you can use this rootElement to access the current activeElement:

From:

const clickTarget = event.target as HTMLElement;

...

if (document.activeElement === event.target) { ... }

To:

const clickTarget = this.rootElement.activeElement;

...

if (this.rootElement.activeElement === event.target) { ... }

[Phil147]

Hi @NorbertB29

yes and by improving shadow dom support we rely on issues like this. 🙏 We already have a similar issue we track internally, could you please describe the problem you are experiencing with a reproduction sample? It's hard to accept a solution without knowing the problem.

[NorbertB29]

Hi @Phil147 ,

Thanks for the fast response. We have prepared a reproduction demo about the issue:

Reproduction

When we set the encapsulation to ShadowDom then the autocomplete stops working and also it stops the input's change event, so the reactive form control's valueChange emitter no longer works.

If you set the encapsulation of the starter-app component to default, then the input and the autocomplete works normally as expected.

[Phil147]

Thanks @NorbertB29 We will look into it! 👍

[preranawankhade]

Hi @Phil147, as discussed in above comments, is this issue been looked upon? Do we have solution for autofilling of the forms implemented using shadowDOM? Thanks in Advance!

[yd-allianz]

Hi all, this issue is now fixed. Please update to the latest version and let us know if you're still experiencing problems. Thanks!