0

I'm brand new to LWC (and components in general). I've been doing an online course and through that, I've built a simple component which has user input to search for a Lead. That's working okay, but the issue is whenever the initial search is amended (adding or removing characters), the change event handler fires but the wire service doesn't provision any new data. This results in this.leads being undefined for every search after the first one.

I'm not sure if it's because the wire service not attempting to search or if it's because some parameter is undefined and preventing it from doing so. Either way, I don't know how to debug it nor ultimately how to fix it.

Markup:

<template>
    <lightning-card  title="Lead Search" icon-name="standard:search" class="slds-m-around_medium">
        <div class="slds-box slds-theme_default">
            <lightning-input
                    label="Search Term"
                    variant="label-hidden"
                    placeholder="Search by name, phone, website, or address"
                    type="text"
                    value={searchTerm}
                    onchange={handleSearchTermChange}>
            </lightning-input>
        </div>
    </lightning-card>
</template>

Javascript:

import { LightningElement, track, wire} from 'lwc';
import searchLeads from '@salesforce/apex/LeadSearchController.searchLeads';

const DELAY = 1000;

export default class LeadList extends LightningElement {
    @track leads = [];
    @track searchTerm;
    @track error;

    handleSearchTermChange(event) {
        if(this.leads) {
            this.searchTerm = event.target.value;
            const selectedEvent = new CustomEvent('newsearch', {detail: this.searchTerm});
            window.clearTimeout(this.delayTimeout);
            this.delayTimeout = setTimeout(() => {
                this.dispatchEvent(selectedEvent);
            }, DELAY);
        }
    }

    @wire(searchLeads, {
        searchTerm: '$searchTerm'
    })
    loadLeads({error, data}) {
        if(data) {
            this.leads = data;
            const selectedEvent = new CustomEvent('searchcomplete', {
                detail: this.searchTerm
            });
            this.dispatchEvent(selectedEvent);
            this.error = undefined;
        }
        else if(error) {
            this.error = error;
            this.leads = undefined;
        }
    }
}
  • Mike, you can debug LWCs in the browser, using its developer tools (e.g. Chrome's "inspect element"). You have to navigate to the sources, then down through the paths like lightning/r/Contact/someID then modules/someNamespace to find the LWC's "transpiled" .js file. If you open this then "pretty print" it, you should be able to find the various functions, such as "loadLeads", and set breakpoints as you normally would with JavaScript debugging. – Phil W Jul 5 at 7:08
  • Note that your test, this.leads, will be true even when no leads are found. It will only be false in your error case. Note that loadLeads will be called with both data and error as null during component initialization. – Phil W Jul 5 at 7:16
  • @PhilW This is probably a good time to note that this is effectively the first time I've ever written javascript. My background thus far has really only been Apex (and a tiny bit of Python scripting). In any case, I do know what you're referring to in terms of the console and setting breakpoints...I just don't know how to actually use that to solve the issue =/ I've also set a trace flag and I'm debugging in the Apex class (which performs the SOSL) to see when it's called. I appears that up until the first search error, all are performed, but after any error, no subsequent ones are. – Mike Jul 5 at 7:24
  • Hey Mike, sorry if I was too cryptic and assumed too much prior knowledge. Note that there's also an option to enable Lightning Component debugging against specific users, via Setup. Search for "Lighting Components" then select the "Debug Mode" option. This makes the transpiled JavaScript a bit easier to understand. I recommend you actually have a look at w3schools' generic intro to debugging JavaScript: w3schools.com/js/js_debugging.asp then perhaps have a go at debugging some random website's JavaScript with pretty printing, breakpoints and the like. – Phil W Jul 5 at 9:43
  • Use of pretty printing makes setting breakpoints possible; many sites use minified JavaScript and this can turn into a long single line of code. Adding breakpoints gets rather difficult in that case. If you pretty print, the code is reformatted into multiple lines which are easy to add breakpoints to. – Phil W Jul 5 at 9:46
2

Your problem may relate to how handleSearchTermChange only processes the change if this.leads is truthy. If an error happens the change to search term won't recover because you set this.leads to undefined (falsy).

| improve this answer | |
  • Can you expand on your second statement? E.g. "If an error happens the change to search term won't recover." I just don't understand why or how to make that not be the case. – Mike Jul 5 at 7:27
  • Oh okay, I think I'm seeing it. I'm explicitly setting this.leads to undefined when there's an error and thus, all future references to it are falsy...and thus no further search term changes are ever captured...and thus the wire service has an undefined param, which causes it not to provision any data. Is that...mostly accurate? – Mike Jul 5 at 7:32
  • Yup. That's what I was driving at :) – Phil W Jul 5 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.