Bug when using Kendo React Grid with selection and detail component together

[danielturus]

I'm submitting a...

• Bug report

Current behavior

Hello!

I am encountering a bug while utilizing the Kendo React Grid component with the detail prop and selection functionality enabled. The issue lies in the fact that when a row is selected within the nested detail component, which is also a Kendo React Grid, it inadvertently triggers the selection of the corresponding row in the parent grid. This is not the intended behavior and requires a fix 😄 .

Expected behavior

Minimal reproduction of the problem with instructions

Steps:

1. Expand the first row
2. Click on the second row of the child grid (Detail component)
3. You will see that the first row is no longer selected, and the second row from parent grid is selected.

https://stackblitz.com/edit/react-hunnjm?file=app/main.jsx

Browser:

• Brave version 1.46.153

Thank you!

Have a great day!

[kdikov82]

A possible workaround is to check the target within the onSelectionChange event and execute the selection logic for the parent Grid if the target is not the detail Grid:

  const onSelectionChange = (event) => {
    let targetEl = event.nativeEvent.target;
    let isDetail = false;
    while (targetEl.tagName != 'BODY') {
      if (targetEl.tagName == 'TR') {
        if (targetEl.className.indexOf('k-detail-row') >= 0) {
          isDetail = true;
          break;
        }
      }
      targetEl = targetEl.parentNode;
    }
    if (!isDetail) {
      const newSelectedState = getSelectedState({
        event,
        selectedState: selectedState,
        dataItemKey: DATA_ITEM_KEY,
      });
      setSelectedState(newSelectedState);
      let newData = data.map((item) => ({
        ...item,
        [SELECTED_FIELD]: newSelectedState[idGetter(item)],
      }));
      setData(newData);
    }
  };

Here is an example with the workaround: https://stackblitz.com/edit/react-kenryc-jzl6un?file=app%2Fmain.jsx