Support 'passive' option on event listeners #2210
Description
Describe the bug
Most DOM events are not passive by default, but some are ( wheel, scroll, ..) .
see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive
And it is not consistent among major Browsers.
Should Solids JSX support explicit passive options for event listeners ?
See how React addressed this issue: facebook/react#6436 and the resolution: facebook/react#19654
Steps to Reproduce the Bug or Issue
see example on SolidJS Playground and below: (update Sep 2024: on chrome the playground doesn't show the bug anymore)
import { render } from "solid-js/web";
import { onMount } from "solid-js";
function Counter() {
const wheel = (e:MouseEvent) => {
e.preventDefault() // only works on not passive events
e.stopPropagation()
console.log("wheel stopped?")
}
let div ;
onMount(() => div.addEventListener("wheel", wheel, {passive:false}) ) // most events are not passive by default but "wheel" is in Chrome
return (
<>
<div oncapture:wheel={wheel} style={{"background-color":"lightgreen","height":"26vh"}} />
<div ref={div} style={{"background-color":"lightgray" ,"height":"26vh"}} > In Chrome this gray div is the only div that prevents scrolling</div>
<div on:wheel={wheel} style={{"background-color":"lightblue","height":"26vh"}} />
<div onWheel={wheel} style={{"background-color":"crimson" ,"height":"26vh"}} />
</>
);
}
render(() => <Counter />, document.getElementById("app")!);Expected behavior
Like on:* and oncapture:*
There could be a JSX syntax to specify the passive option for events. Maybe onpassive:* and onnotpassive: * or onWheelNotPassive and onScrollNotPassive