function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Andee Weir 17Andee Weir 17 

LWC : Clear value in child component

Hi.
Bit of a stupid question but I have 2 LWC components, andeeParent which contains the second LWC andeeChild.  The child has an input box which after the user enters a value & clicks a submit button, passes the value entered by the user to the parent for display in a separate field. This all works.  However once the parent receives the data from the child it should remove the value the user entered from the display.  I cannot do this in the child component within its handleClick as we have other uses of this child LWC which requires the value to stay.

andeeParent.html
<template>
    {parentValue}
    <c-andee-Child search-string={result} ongetsearchvalue={handleSearchValue}></c-andee-Child>    
</template>

andeeParent.js
import { LightningElement } from 'lwc';

export default class AndeeParent extends LightningElement {

    parentValue = 'origValue';
    result = "";

    handleSearchValue(event){
        this.parentValue = this.parentValue + ',' + event.detail;
        this.result = ""; // I would expect this to clear the input box on the child.
    }
}
andeeChild.html
<template>
    <lightning-input data-id="input" type="text" value={searchString}></lightning-input>
    <lightning-button label="Submit" title="Submit" onclick={handleClick}></lightning-button>
</template>

andeeChild.js
import { LightningElement, api } from  'lwc';

export default class AndeeChild extends LightningElement {

    @api searchString = '';

    handleClick(event) {
        this.searchString = this.template.querySelector('[data-id="input"]').value;
        const searchEvent = new CustomEvent("getsearchvalue", {
            detail : this.searchString
        });

        this.dispatchEvent(searchEvent);
    }
}

I would have expected the setting of this.result to "" in andeeParent.js.handleSearchValue to have removed the value that the user has entered in the child's inputbox. 

Any ideas really appreciated.

Andee
Andee Weir 17Andee Weir 17
I have found a way to fix it but I'm pretty sure this is not the correct way.  If I change the parent component to be:-
 
<template>
    {parentValue}
    <c-andee-Child data-id="inputLookup" search-string={searchString} ongetsearchvalue={handleSearchValue}></c-andee-Child>    
</template>
 
import { LightningElement } from 'lwc';

export default class AndeeParent extends LightningElement {

    parentValue = 'origValue';
    searchString = "";

    handleSearchValue(event){
        this.parentValue = this.parentValue + ',' + event.detail;
        this.template.querySelector('[data-id="inputLookup"]').searchString = '';
    }
}

So the variable 'result' has been renamed to be the same as the child components attribute i.e. searchString/search-string, I can then use querySelector to change it.  Interestingly without renaming this variable, changing via querySelector had not effect.

There must be a better way!