LWC perform querySelector on DIV from @wire

Question

I have an LWC as a quick action in Global Actions. A wire method is executed, and in the data block I execute another method which performs a querySelector on a div. The first time I open the quick action LWC, the querySelector is performed successfully. When I close the quick action window and open it again, the querySelector is null. Only after a refresh the querySelector is performed successfully again.

<div data-parent-id="parent-div-id" class={parentClass} style={parentStyle}>

@wire(isUser)
wiredIsUser({data, error}) {
    if (data) {
        this.isUser = data;
        this.setCssClass();
    } else if (error) {
        console.log('Error wire:', error.body.message);
    }
} 

setCssClass() {
    let element = this.template.querySelector('[data-parent-id="parent-div-id"]');
    console.log('element:', element); // not null the first time, but null the second time
    if (element && this.isUser) {
        let height = element.getBoundingClientRect().height;
        let width = element.getBoundingClientRect().width;
        this.parentClass = 'slds-p-around_large slds-scrollable_y';
        this.parentStyle = 'height:' + height + 'px; width:' + width + 'px;';
    }
}

Prashant Kashyap Prashant Kashyap · Accepted Answer · 2021-01-03T17:20:59

The first time you open the component, the data will be pulled from Server, during which, the component has been rendered, and the setCssClass() is invoked and thus querySelector works fine. Since the Method is wired, the response is cached on browser.

The next time you open the component, the data is pulled from cache, which happens quickly/before the component has been rendered, and thus querySelector returns nothing.

you might want to change the approach in this case.

LWC perform querySelector on DIV from @wire

1 Answers