I am facing an issue with my parent component named ha-config-user-picker.js and its child component called edit-user-view.js.
Parent Component:
It contains a mapping of users and includes the child component tag along with its props.
When a click event is triggered, it retrieves the shadowRoot of the child component and calls the method toggleView.
<template is="dom-repeat" items="[[users]]" as="user">
<paper-button on-click="clickEditUser">
<paper-item>
...
</paper-item>
</paper-button>
</template>
<edit-user-view hass="[[hass]]" user="[[user]]"></edit-user-view>
clickEditUser(ev) {
this.user = ev.model.user;
const el = this.shadowRoot.querySelector("edit-user-view");
el.toggleView();
}
Child Component:
<fullscreen-pop-up>
<dialog-header title="Edit User"></dialog-header>
<div class="content">
...
</div>
</fullscreen-pop-up>
toggleView = () => {
const popup = this.shadowRoot.querySelector("fullscreen-pop-up");
const dialog = popup.shadowRoot.querySelector("paper-dialog");
dialog.toggle();
}
Error: Upon clicking a mapped user, I encounter the error
Uncaught TypeError: Cannot read property 'shadowRoot' of nullconst popup = this.shadowRoot.querySelector("fullscreen-pop-up");If I click any user again, it successfully retrieves the shadowRoot and works as expected.
Question: Why does it return null the first time but work afterwards? and how can I troubleshoot and fix this issue? Could this be related to: https://github.com/Polymer/polymer/issues/5144
Please let me know if more information is needed for better clarity. :)