LWC debugging and using console.log() affects behavior of my app

Question

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 ???

Answer 1

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

@track fpsLegalId @track vehiclePlate @track customerIdentifier

Answer 2

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.