Prevent row onClick for Checkbox row

[aturan23]

I have an issue with checkbox rows. Can we divide row onClick function and checkbox onClick. Because on checkbox clicked it returns row onClick callback.

[GuptaSiddhant]

This is know as event propagation can be prevented using stopPropagation(). Although to use this you'd have to create your own handleClick for Checkboxes if you're using the code shown in row-selection example.

const IndeterminateCheckbox = React.forwardRef(
  ({ indeterminate, ...rest }, ref) => {
    const defaultRef = React.useRef()
    const resolvedRef = ref || defaultRef

    React.useEffect(() => {
      resolvedRef.current.indeterminate = indeterminate
    }, [resolvedRef, indeterminate])

    return (
        <input type="checkbox" ref={resolvedRef} onClick={(e) => e.stopPropagation()} {...rest} />
    )
  }
)

All you have do is add onClick={(e) => e.stopPropagation()} to input in example provided.

[aturan23]

Thanks! it's helpful!

[brunobarretta]

Here is a complete version with handleClick, this way the checkbox click does not go to the row.

  function IndeterminateCheckbox({
    indeterminate,
    className = "",
    onClick,
    ...rest
  }: { indeterminate?: boolean } & HTMLProps<HTMLInputElement>) {
    const ref = useRef<HTMLInputElement>(null);
  
    useEffect(() => {
      if (typeof indeterminate === "boolean" && ref.current) {
        ref.current.indeterminate = !rest.checked && indeterminate;
      }
    }, [ref, indeterminate, rest.checked]);

    const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
      if (onClick) {
        onClick(e);
      }
      e.stopPropagation();
    };
  
    return (
      <input
        type="checkbox"
        ref={ref}
        className={className + " cursor-pointer"}
        onClick={handleClick}
        {...rest}
      />
    );
  }

[andreyna1808]

Thanks! it's helpful!

[sue1en]

Thanks dude!!!