@visx/brush How to disable click outside selection ?

[duongvinhduc]

[datananda]

I was able to hack this functionality by wrapping the brush in an element with a callback ref and using the callback ref to reach in and remove the brush stage rect:

import { useCallback } from "react";
import { Brush, BrushProps } from "@visx/brush";

function BrushWithoutStage(brushProps: BrushProps) {
  // reach in and remove brush stage rect
  const brushContainerRef = useCallback((el: SVGElement | null) => {
    if (el) {
      let elements = el.getElementsByClassName("visx-brush-overlay");
      if (elements.length) {
        elements[0].remove();
      } else {
        const observer = new MutationObserver(() => {
          if (elements.length) {
            observer.disconnect();
            elements[0].remove();
          }
        });
        observer.observe(el, { subtree: true, childList: true });
      }
    }
  }, []);

  return (
    <g ref={brushContainerRef}>
      <Brush {...brushProps} />
    </g>
  );
}

export default BrushWithoutStage;

and here it is applied to the Brush example from the gallery: https://codesandbox.io/s/nervous-sid-recmoz.

That said, it feels like there should be a less hacky way to achieve this. The easiest might be to add a disableBrushStageEvents prop that controls whether or not the visx-brush-overlay rect is created. I could open a PR for that if it seems like a reasonable solution to folks.

[hshoff]

Fixed https://github.com/airbnb/visx/pull/1744. Can add disableDraggingOverlay prop and remove onClick handler. Example: https://codesandbox.io/p/sandbox/great-glade-5fp8vh?file=%2FExample.tsx%3A216%2C1-221%2C1