Skip to content

RecordDetails expand button triggers RowClickPlugin #1133

Description

@radoslawkozuch

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

  1. Create a DataTable.
  2. Add both RecordDetailsPlugin and RowClickPlugin to it.
  3. Click the expand button to see record details.
  4. 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);
                });
            }
        });

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

Projects

Status
Done

Relationships

None yet

Development

No branches or pull requests

Issue actions