In my project I have a child component which displays a lightning-datatable.
<c-editor-step-datatable key={item.path} table-data={item.table.data} table-columns={item.table.columns}></c-editor-step-datatable>
The datatable is displayed correctly, with inline edit enabled.
However, as soon as an Inline Edit button is clicked, the page is refreshed!
There are no custom events attached and I can't figure out why the refresh occurs.
Clicking on the button in the green circle will correctly activate inline edit on a field
Clicking on any of the pencils (in the red circles) will trigger a redirect!!
The initial page URL is ".../lightning/n/MainPageURL"
The redirect is performed to ".../lightning/n/MainPageURL?"
This behaviour does not occur when using the "openInlineEdit" event on the datatable.
However, using "openInlineEdit" is not desired as it more cumbersome for users.
this.template.querySelector('lightning-datatable').openInlineEdit();
Javascript:
...
_data;
_columns;
_keyField;
@api
get tableData() {
return this._data;
}
set tableData(value) {
if(value)
this._data = JSON.parse( JSON.stringify( value ) );
}
@api
get tableColumns() {
return this._columns;
}
set tableColumns(value) {
if(value) {
this._keyField = value[0].fieldName;
this._columns = JSON.parse( JSON.stringify( value ) );
this._columns.push({type: "button-icon", typeAttributes: {iconName: "utility:edit", name: "edit"}, fixedWidth: 40});
this._columns.push({type: "button-icon", typeAttributes: {iconName: "utility:delete", name: "delete", iconClass: "slds-icon-text-error"}, fixedWidth: 40});
}
}
...
Template:
...
<lightning-datatable
data={_data}
columns={_columns}
key-field={_keyField}
hide-checkbox-column
></lightning-datatable>
...
Contents:
Below are the values of:
_keyField
_columns
_data
Why does the inline edit pencil trigger a redirect?
How can this behaviour be prevented?
