[SalesForce] Get final Lightning input value in LWC JS

I have a lightning-input tag in my LWC HTML file and i want to get the final value of the text which user inputs. I have a onchange event but it gives me value on every change.
for eg. if the user inputs good. It gives me values as g,go,goo,good.
I want the last value i.e. good.

<lightning-input type="text" required label="Please provide details" placeholder="Add your comments" onchange={handleTextChange} name={question.questionApiName} value={textValue}></lightning-input>

Best Answer

For a lookup inputs, generally its recommended to add a timeout to avoid any unnecessary Apex calls.

If you want to get the final value after the change, use the onblur event .

The blur event fires when an element has lost focus.

Here is a playground link.

Related Solutions

[SalesForce] Lightning Web Component – do I need to track changes for every single input field in a form

I would simply collect all the information on form submission using query selector.

this.template.querySelector('classname'); //use query selector

Note that @track should not be used extensively . It makes less sense to use this decorator if we are not rendering something on the UI .

If there is no client side validations involved on page, there is no need to use change handler on every input .

[SalesForce] How to add delay in onchange event in LWC

You can't "delay" the event explicitly (though some browsers may choose to only fire them periodically), but you could build in a delay for potentially expensive processing:

onChangeHandler(event) {
    clearTimeout(this.timeoutId); // no-op if invalid id
    this.timeoutId = setTimeout(this.doExpensiveThing.bind(this), 500); // Adjust as necessary
}
doExpensiveThing() {
    // Do something here
}

This example code will wait until no new changes have occurred for at least half a second.

Edit: Playground, LWC Recipes Example

Best Answer

Related Solutions

[SalesForce] Lightning Web Component – do I need to track changes for every single input field in a form

[SalesForce] How to add delay in onchange event in LWC

Related Topic