UI: Remove Checkbox bug workaround (#3283)

iTwin · Mar 2, 2022 · d3e5f09 · d3e5f09
1 parent f45f3ee
commit d3e5f09
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 28 deletions.
diff --git a/common/changes/@itwin/core-react/ui-checkbox-workaround_2022-03-01-11-21.json b/common/changes/@itwin/core-react/ui-checkbox-workaround_2022-03-01-11-21.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/core-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/core-react"
+}
diff --git a/ui/core-react/src/core-react/tree/Node.tsx b/ui/core-react/src/core-react/tree/Node.tsx
@@ -85,8 +85,6 @@ export interface TreeNodeProps extends CommonProps {
  * @public
  */
 export class TreeNode extends React.Component<TreeNodeProps> {
-  private checkboxWrapperRef = React.createRef<HTMLDivElement>();
-
   constructor(props: TreeNodeProps) {
     super(props);
   }
@@ -117,13 +115,11 @@ export class TreeNode extends React.Component<TreeNodeProps> {
         checkbox = this.props.renderOverrides.renderCheckbox(props);
       } else {
         checkbox = (
-          <div ref={this.checkboxWrapperRef}>
-            <Checkbox
-              {...props}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => this._onCheckboxChange(e.target.checked)}
-              data-testid={this.createSubComponentTestId("checkbox")}
-            />
-          </div>
+          <Checkbox
+            {...props}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => this._onCheckboxChange(e.target.checked)}
+            data-testid={this.createSubComponentTestId("checkbox")}
+          />
         );
       }
     }
@@ -192,23 +188,6 @@ export class TreeNode extends React.Component<TreeNodeProps> {
 
   private _onClick = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
-
-    // ITwinUI-react has a bug that prevents us from stopping checkbox click event propagation to the parent element
-    if (!this.checkboxWrapperRef.current
-      || (e.target instanceof Element && !isDescendant(this.checkboxWrapperRef.current, e.target))) {
-      this.props.onClick?.(e);
-    }
+    this.props.onClick?.(e);
   };
 }
-
-function isDescendant(ancestor: Element, descendant: Element): boolean {
-  while (descendant.parentElement !== null) {
-    if (descendant === ancestor) {
-      return true;
-    }
-
-    descendant = descendant.parentElement;
-  }
-
-  return false;
-}
diff --git a/ui/core-react/src/test/tree/Node.test.tsx b/ui/core-react/src/test/tree/Node.test.tsx
@@ -133,7 +133,7 @@ describe("<Node />", () => {
   it("does not call node onClick callback when checkbox is clicked", () => {
     const handleOnClick = sinon.fake();
     const { getByRole } = render(<Node label="a" level={0} onClick={handleOnClick} checkboxProps={{}} />);
-    fireEvent.click(getByRole("checkbox").parentElement!);
+    fireEvent.click(getByRole("checkbox"));
     expect(handleOnClick).to.not.have.been.called;
   });