LWC wire method firing everytime on button click

Question

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:

<template>
    <lightning-layout>
        <lightning-layout-item>
            <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}
                            onclick={handleSelect}>
                        </c-case-list-item>
                    </template>
                </div>
            </lightning-card>
        </lightning-layout-item>
        <lightning-layout-item>
            <lightning-card label="Records">
                Selected Record: {selectedId}</br>
                <pre>All Records:{iwsRecordsJson}</pre>
            </lightning-card>
        </lightning-layout-item>
    </lightning-layout>
</template>

Parent JS:

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

export default class CaseItems extends LightningElement {
    iwsRecords;
    selectedIWSRecord;
    error;
    selectedId;
    wiredRecords;
    pageSelected;

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

                console.log(this.iwsRecords);
                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';
        console.log(event.target.dataset.id);
        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:

<template>
    
    <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">
                        <b>
                            <lightning-formatted-url value={recordLink} tooltip="Omit leading slash" label={iws.Name}
                                target="_blank"></lightning-formatted-url>
                        </b>
                    </span>

                    <span class="slds-truncate slds-col_bump-left" title="99">
                        {iws.ConfirmedSeats__c}
                    </span>
                </div>
                <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">
                        {iws.Stage__c}
                    </span>
                </div>
                <div slot="footer">
                    {iws.Site} | {iws.Cohort__c} | {iws.TrackFamily__c}
                </div>
            </a>

        </li>

    </div>
</template>

Child JS:

import { LightningElement, api } from 'lwc';

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

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

Output:

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.