Description
When using both RowClickPlugin and RecordDetailsPlugin in a DataTable, clicking the expand button also triggers the row click event.
If the RowClickPlugin is used to open a new view or page, the RecordDetailsPlugin stops working because the view changes before the details can open.
Steps to Reproduce
- Create a
DataTable.
- Add both
RecordDetailsPlugin and RowClickPlugin to it.
- Click the expand button to see record details.
- The
RowClickPlugin action fires along with the expand action.
Expected Behavior
Clicking the expand button should only open the record details. It should stop the click event (event bubbling) so the row click is not triggered.
Workaround
In my custom RowClickPlugin, I manually ignore clicks on or near the expand button.
RowClickPlugin.ClickHandler<T> listener = "...";
config.addPlugin(new DataTablePlugin<T>() {
@Override
public void onRowAdded(DataTable<T> dataTable, TableRow<T> tableRow) {
tableRow.addCss(dui_cursor_pointer);
tableRow.element().addEventListener("click", evt -> {
Element target = (Element) evt.target;
// Ignore clicks on buttons, links, icons, SVG elements or any form inputs
if (target.closest("button, a, i, svg, input, select, textarea, label") != null) {
return;
}
listener.onClick(tableRow);
});
}
});
Description
When using both
RowClickPluginandRecordDetailsPluginin aDataTable, clicking the expand button also triggers the row click event.If the
RowClickPluginis used to open a new view or page, theRecordDetailsPluginstops working because the view changes before the details can open.Steps to Reproduce
DataTable.RecordDetailsPluginandRowClickPluginto it.RowClickPluginaction fires along with the expand action.Expected Behavior
Clicking the expand button should only open the record details. It should stop the click event (event bubbling) so the row click is not triggered.
Workaround
In my custom
RowClickPlugin, I manually ignore clicks on or near the expand button.