I am working on a requirement wherein I display a list of error messages on the parent component and there are certain lightning input fields in the child component.
On click of the error message, I need to highlight the corresponding field in child component in red, showing error is related to that field.
SO, for example. I have an error message that says Name should not be empty, in that case, I need to highlight the input field for Name in the child component.
To achieve this, I'm passing the id value to a method in the child component, which relates to both the id and data-id attributes of the input field to be highlighted/focused on.
I used a console message in child component method to verify if I'm getting the correct data-id, and it sends the correct data-id but the focus doesn't seem to be working .
Below is the code snippet of how I'm trying to focus.
@api
focusOnError(sfieldId){
/* eslint-disable no-console */
console.log('Id Recieved in child component : ',sfieldId);
this.template.querySelector(`[data-id="${this.sfieldId}"]`).focus();
}
And this is the css that I used :
lightning-input:focus {
outline: none !important;
border-color: #719ECE;
box-shadow: 0 0 10px #719ECE;
}
Can someone please tell the right way to use focus to take to the specific field and highlight.
Thanks.