0

I have a search app with 3 lightning-input fields with an onchange handler. This onchange handler behaves differently when I trace its behavior with a console.log() command

HTML view :

            <div class="slds-col slds-size_1-of-4">
                <lightning-input label='Search by legalid'
                    type="text"
                    placeholder='Legalid ...'
                    data-clause='legalid'
                    onfocus={handleFocus}
                    onchange={handleChange}
                    value={fpsLegalId}>
                </lightning-input>
            </div>

            <div class="slds-col slds-size_1-of-4">
                <lightning-input label='Search by customer'
                    type="text"
                    placeholder='Customer identifier (phone, email, identifier) ...'
                    data-clause='customer'
                    onfocus={handleFocus}
                    onchange={handleChange}
                    value={customerIdentifier}>
                </lightning-input>
            </div>

            <div class="slds-col slds-size_1-of-4">
                <lightning-input label='Search by plate'
                    type="text"
                    placeholder='Plate ...'
                    data-clause='vehicle'
                    onfocus={handleFocus}
                    onchange={handleChange}
                    value={vehiclePlate}>
                </lightning-input>
            </div>
            
            <!-- BUTTON -->
            <div class="slds-col slds-size_1-of-4">
                <lightning-button
                    label='Search'
                    variant='brand'
                    disabled={isDisabled}
                    onclick={handleButtonClick}>
                </lightning-button>
            </div>

Javascript :

    fpsLegalId
    vehiclePlate
    customerIdentifier

    handleChange(event) {
        const clause = event.target.dataset?.clause
        const value = event.target.value

        console.log('### Search2 handleChange : input', clause, value)

        this.fpsLegalId =         (clause == 'legalid'  ? value : this.fpsLegalId)
        this.customerIdentifier = (clause == 'customer' ? value : this.customerIdentifier)
        this.vehiclePlate =       (clause == 'vehicle'  ? value : this.vehiclePlate)

        console.log('### Search2 handleChange : res', this.fpsLegalId, this.customerIdentifier, this.vehiclePlate)
}

Sample output (correct) :

[Log] ### Search2 handleChange : input – "vehicle" – "a"
[Log] ### Search2 handleChange : res – "" – "" – "a"
[Log] ### Search2 handleChange : input – "vehicle" – "ab"
[Log] ### Search2 handleChange : res – "" – "" – "ab"
[Log] ### Search2 handleChange : input – "vehicle" – "ab1"
[Log] ### Search2 handleChange : res – "" – "" – "ab1"
[Log] ### Search2 handleChange : input – "vehicle" – "ab12"
[Log] ### Search2 handleChange : res – "" – "" – "ab12"

This is OK.

My Issue

When I comment out the first console.log()

//console.log('### Search2 handleChange : ', clause, value)

this all stops working and the output is :

### Search2 handleChange : res – "" – "" – ""
### Search2 handleChange : res – "" – "" – ""
### Search2 handleChange : res – "" – "" – ""
### Search2 handleChange : res – "" – "" – ""

The values of clause and value seem to be affected by the presence/absence of the console.log() Why ???

2 Answers 2

0

I dont know the reason but if you annotate your vars as @track works correctly, I mean...:

@track fpsLegalId @track vehiclePlate @track customerIdentifier

3
  • 2
    @track isn't required for simple variables any longer, see this.
    – sfdcfox
    May 5, 2021 at 12:22
  • I know, but I tested it and the console log shows the correct values using @track May 5, 2021 at 12:24
  • I'll have a look, thanks
    – altius_rup
    May 5, 2021 at 16:12
0

I don't really see any reason why this should happen, but you should be able to just:

handleChange(event) {
  let clause = event.target.dataset.clause;
  let value = event.target.value;
  this[clause] = value;
  console.log('Inputs: ', clause, value);
}

You'll want to change the clause values to match the property names.

Example code here.

1
  • I'll have a look, thanks
    – altius_rup
    May 5, 2021 at 16:11

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.