-1

I am trying to select the entire text in the lightning input when I click on the inline edit (pencil) icon in the lightning datatable (LWC). Is there an event that gets fired when we click on the pencil icon? The oncellchange event is fired when we change the focus from one cell to another. I am using the below code but queryselector is unable to find the lightning input value.

HTML

<lightning-datatable key-field="Id" data={records} columns={colDisplay} onkeyup={handleKeyUp} oncellchange={handleCellChange}>
                        </lightning-datatable>

JS

handleKeyUp(event) {
        console.log('handleKeyUp');
        console.log(this.template.querySelector('lightning-input').value);
    }
    handleCellChange(event) {
        console.log('handleCellChange');
        console.log(this.template.querySelector('lightning-input').value);
    }
4
  • Can you please share the code which you have tried? Commented Dec 28, 2023 at 4:22
  • Just edited my post and added code.
    – Shanky
    Commented Dec 28, 2023 at 15:53
  • try the solution posted here - salesforce.stackexchange.com/questions/329295/… Commented Dec 28, 2023 at 16:47
  • The solution posted in the link is for onchange and works well. I need to select the entire input text when I click on the edit/pencil icon. So essentially I need an event for the edit/pencil icon. The oncellchange event does not return anything.
    – Shanky
    Commented Dec 28, 2023 at 19:52

1 Answer 1

-1

According to the documentation for lightning-input, there is no event that gets fired when you click on the pencil icon. The supported events are blur, focus, change, and commit. The oncellchange event is fired when the value of a cell changes, not when you click on the cell.

One possible way to get the changed text in the lightning input when you click on the pencil icon and change the value is to use the onchange attribute on datatable. The onchange event is fired when the input element value is changed.

For example, you can modify your handleKeyUp function as follows:

handleInlineEditChange(event) {
    console.log('handleInlineEditChange');
    var ele = event.detail.value;
    console.log('changed value :: '+ele);
}

Your datatable code look like this:

<lightning-datatable key-field="Id" 
data={records} 
columns={colDisplay} 
onchange={handleInlineChange}>
</lightning-datatable>
1
  • Thank you, Tushar! I did try onchange event and it works. However, the focus or blur event does not. The requirement is to highlight the input text when clicking the pencil icon. Unfortunately, onchange event would not fit into the requirement.
    – Shanky
    Commented Dec 29, 2023 at 14:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .