Unable to Prevent Default in Passive Event Listener Invocation

[realrnvr]

I’m currently implementing a feature where I need to disable pointer, keyboard, and scroll events when a controller (controlled by an isOpen state) is active.

I attempted to block these events using the subscribeSensors API provided by the library. However, I’m encountering the following error:
Unable to preventDefault inside passive event listener invocation.

here is my code:

useEffect(() => {
  if (isOpen) {
    return;
  }

  const unsubscribeKeyDown = subscribeSensors("onKeyDown", (event) => {
    event.stopPropagation();
  });

  const unsubscribePointerDown = subscribeSensors("onPointerDown", (event) => {
    event.stopPropagation();
  });

  const unsubscribeWheel = subscribeSensors("onWheel", (event) => {
    event.stopPropagation();
    event.preventDefault(); // Causes the error
  });

  const unsubscribeGestureStart = subscribeSensors("onGestureStart", (event) => {
    event.stopPropagation();
    event.preventDefault();
  });

  return () => {
    unsubscribeKeyDown();
    unsubscribePointerDown();
    unsubscribeWheel();
    unsubscribeGestureStart();
  };
}, [isOpen, subscribeSensors]);

Thank you!

[igordanchenko]

Can you describe the use case you are trying to implement?

The lightbox in its default configuration prevents default wheel events over here -

yet-another-react-lightbox/src/modules/Controller/usePreventWheelDefaults.ts

Lines 18 to 23 in b91a18a

	const listener = useEventCallback((event: WheelEvent) => {
	const horizontal = Math.abs(event.deltaX) > Math.abs(event.deltaY);
	if ((horizontal && preventDefaultWheelX) || (!horizontal && preventDefaultWheelY) || event.ctrlKey) {
	event.preventDefault();
	}
	});

[realrnvr]

Thank you so much for the prompt response and for pointing me to the specific code snippet! I really appreciate the detailed explanation—it gave me a much better understanding of how the wheelEvent operates under the hood.

After reviewing my previous implementation, I realized that I had missed adding the ! before the isOpen boolean. I’ve now updated the code accordingly.

  useEffect(() => {
    if (!isOpen) {
      return;
    }

    const unsubscribeKeyDown = subscribeSensors("onKeyDown", (event) => {
      event.stopPropagation();
    });

    const unsubscribePointerDown = subscribeSensors(
      "onPointerDown",
      (event) => {
        event.stopPropagation();
      }
    );

    const unsubscribeWheel = subscribeSensors("onWheel", (event) => {
      event.stopPropagation();
      event.preventDefault();
    });

    const unsubscribeGestureStart = subscribeSensors(
      "onGestureStart",
      (event) => {
        event.stopPropagation();
        event.preventDefault();
      }
    );

    return () => {
      unsubscribeKeyDown();
      unsubscribePointerDown();
      unsubscribeWheel();
      unsubscribeGestureStart();
    };
  }, [isOpen, subscribeSensors]);

To give you a clearer idea of what I’m trying to achieve, I’ve prepared a visual explanation using Excalidraw. Here’s the link: excalidraw

I sincerely apologize for any earlier oversights or typos in my explanation. Thanks again for your insights and for helping me better understand the implementation!