This looks strange to me, not sure if this is a bug with LWC. Every time when event fires, the wire method is running and sets the array values to the original.

Expectation: Whenever I click one of the cards in the list based on the id I am setting the attribute value in the array, and it should change the selectedId and also update the array.

The issue is: When I click the card, it is changing the selectedId, but however wire method is firing and resetting the array and selectedId.

The question is: Why does the wire method fire when I click the card? The same code was working in the previous release, not sure what is changed. Is there anything I am missing?

Parent Component:

            <lightning-card label="Records">
                <div class="slds-scrollable_y content" style="width: 600px;">
                    <template for:each={iwsRecords} for:item="iws">
                        <c-case-list-item iws={iws} class="iwsrecord" data-name={iws.Name} data-account={iws.Account__c}
                            key={iws.Id} iws-id={selectedId} data-id={iws.Id} page-selected={iws.pageSelected}
            <lightning-card label="Records">
                Selected Record: {selectedId}</br>
                <pre>All Records:{iwsRecordsJson}</pre>

Parent JS:

import { LightningElement, wire, api } from 'lwc';
import getIWSRecordsData from '@salesforce/apex/iwsManager.getIWSRecordsData';

export default class CaseItems extends LightningElement {

    wiredIWSRecords(result) {
        if (this.selectedId === undefined) {
            this.wiredRecords = result
            if (result.data) {
                this.iwsRecords = result.data.map(
                    record => ({
                        Site: record.Site_Located__r?.Name,
                        account: record.Account__r?.Name,
                        pageSelected: ''

                this.selectedId = this.iwsRecords[0].Id;
                this.iwsRecords[0].pageSelected = 'page';

            } else if (result.error) {
                this.iwsRecords = undefined;
                this.error = JSON.stringify(result.error);

    handleSelect(event) {
        this.pageSelected = 'page';
        const recId = event.target.dataset.id;
        this.selectedId = event.target.dataset.id;
        this.iwsRecords.forEach(element => {
            if (recId === element.Id) {
                console.log('FOUND RECORD')
                element.pageSelected = 'page'
            } else {
                element.pageSelected = ''


    get iwsRecordsJson() {
        return JSON.stringify(this.iwsRecords, undefined, 4);

Child html:

    <div class={styleClass} onclick={handleClick}>

        <li class="slds-split-view__list-item" role="presentation">

            <a href="#" aria-current={pageSelected} role="option"
                class="item slds-split-view__list-item-action slds-grow slds-has-flexi-truncate" tabindex="0">
                <div class="slds-grid slds-wrap">
                    <span class="slds-truncate slds-text-body_regular" title="Riley Shultz">
                            <lightning-formatted-url value={recordLink} tooltip="Omit leading slash" label={iws.Name}

                    <span class="slds-truncate slds-col_bump-left" title="99">
                <div class="slds-grid slds-wrap">
                    <span class="slds-truncate" title="Biotech, Inc.">{iws.account}</span>
                    <span class="slds-truncate slds-col_bump-left" title="Nurturing">
                <div slot="footer">
                    {iws.Site} | {iws.Cohort__c} | {iws.TrackFamily__c}



Child JS:

import { LightningElement, api } from 'lwc';

export default class CaseListItem extends LightningElement {
    @api iws;
    @api pageSelected = '';

    get recordLink() {
        return '/' + this.iws.Id;

Output: enter image description here

  • Wire services are reactive when variables are used with prefix $.
    – MIX DML
    Sep 8, 2022 at 2:12
  • I did not use anything with $
    – Ajay
    Sep 8, 2022 at 2:22

1 Answer 1


I found a silly mistake in the child component that, I was not handling the handleClick event, which is why simply refreshed the page. Very silly mistake.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .