Bug(Table): Clicking on multiselect checkbox the row doesn't get selected.

[anuraghazra]

Raised by https://razorpay.slack.com/archives/G01B3LQ9H0W/p1705485717711829?thread_ts=1705483552.271549&cid=G01B3LQ9H0W

If I click on the row it gets selected which is fine. But if I click on the checkbox, the row doesn’t get selected.

[AritraLeo]

Raised by https://razorpay.slack.com/archives/G01B3LQ9H0W/p1705485717711829?thread_ts=1705483552.271549&cid=G01B3LQ9H0W

If I click on the row it gets selected which is fine. But if I click on the checkbox, the row doesn’t get selected.

It's been a while that I am having issue joining your slack channel can you please post the issue here or help me join your channel.

[anuraghazra]

joining your slack channel

Sorry it's private organization slack, only razorpay employees can join.

Here's a video explaining the issue:

Screen.Recording.2024-01-17.at.3.28.29.PM.mov

[amandal97]

Premise 📄

The issue will only occur if the following are true:

1. Both Checkbox and Row are clickable
2. Blade Checkbox is used for selecting rows

The multi-select feature of Table works correctly if Native HTML Input is used instead of Blade Checkbox. Here's a codesandbox example for the same.

Why does this issue occur only for Blade Checkbox? 🤔

The issue occurs due to unexpected event bubbling. Let us take an HTML Input and a Blade Checkbox and see how event delegation happens in both the cases.

HTML Input

<div onClick={() => console.log("native outer div clicked")}>
  <input
    type="checkbox"
    checked={isNativeInputChecked}
    onChange={() => setIsNativeInputChecked((prev) => !prev)}
  />
</div>

// console
native outer div clicked

Blade Checkbox

 <div onClick={() => console.log("blade outer div clicked")}>
    <Checkbox
      isChecked={isBladeCheckboxChecked}
      onChange={() => setIsBladeCheckboxChecked((prev) => !prev)}
    />
 </div>

// console
blade outer div clicked
blade outer div clicked

If we click on the native input, event is delegated once and prints out "native outer div clicked" as expected. But, for Blade checkbox event is delegated twice and prints "blade outer div clicked" twice. Here's a codesandbox example for better understanding.

Why does Blade Checkbox behave this way? 💡

The Checkbox component composition looks like below:

1. The entire component is wrapped inside a label element
2. The actual input element is hidden
3. An icon is being used as the checkbox representation

The following happens when we click on the Checkbox:

1. The click on the icon triggers an event delegation which bubbles upto the label and the outer div
2. The first console gets printed as "blade outer div clicked"
3. The label element has a built-in behaviour where if you click on it or any of it's child elements, it will trigger the onChange event of its associated input element
4. As a result, another event delegation occurs which prints "blade outer div clicked" again

Solution 🖋️

1. Short Term Fix [Table]: Stop event propagation while clicking on Checkbox inside the Table Component [https://github.com/fix(Table): selection toggle for multiselect table #2076]
2. Optimal Solution [Checkbox]: Only allow the onChange event to be bubbled up from the Checkbox component. Stop other unnecessary event propagation. The current behaviour might cause inconsistencies while implementing analytics where one click might infer that the checkbox has been clicked 2 times [https://github.com/fix(Checkbox): stop unnecessary event delegation in checkbox #2077]