2

I have a complex UI that renders multiple <lightning-input> fields. When the user edits these fields, I store the originalValue (usually passed through an @api property), the newValue and the oldValue. This allows me to easily identify, if a particular field has been modified (e.g. current value is different from the original value).

Now I want to highlight those fields, for example to display a light-yellow background as long as they are modified.

I tried modifying the triggering element via event.currentTarget with standard HTML (W3Schools):

// testComponent.js
handleChange(event) {
    this.newRecord['myField'] = event.detail.value;
    if (this.isModified('myField')) event.currentTarget.classList.add('dirty-field');
    if (!this.isModified('myField')) event.currentTarget.classList.remove('dirty-field');
    }

isModified(fieldName) {
    return this.newRecord[fieldName] !== this.originalRecord[fieldName];
}
/* testComponent.css */
.dirty-field {
    border: solid orange 1px;
}
<!-- testComponent.html -->
<template>
    <lightning-card>
        <div class="slds-p-horizontal_medium">
            <lightning-input
                label="Test Input"
                value={originalRecord.myField}
                onchange={handleChange}
                variant="label-inline">
            </lightning-input>
        </div>
    </lightning-card>
</template>

This code at least allows me to display an orange border around the whole input field.

I understand the concept of shadow DOM; I know that I can not modify the underlying <input> field from the <lightning-input> with a querySelector.

Is there any way to highlight a field as "modified" (how salesforce does it with their datatable, for example)? Or, more generally speaking: to modify the appearance of the input-boxes from an input field?

Your Answer

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

Browse other questions tagged or ask your own question.