onKeyDownCapture and onKeyDown overwrite each other

[mischnic]

Reproduction

https://codesandbox.io/s/preact-on-capture-overwrite-e8dfk?file=/src/index.js:0-548

//import React from "react";
//import ReactDOM from "react-dom";

import React from "preact/compat";
import ReactDOM from "preact/compat";

function App() {
  return (
    <div
      onKeyDown={() => console.log("div noncapture")}
      onKeyDownCapture={() => console.log("div capture")}
    >
      <input
        onKeyDown={() => console.log("input noncapture")}
        onKeyDownCapture={() => console.log("input capture")}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Steps to reproduce

Open codesandbox and type into the input field

Expected Behavior

Console:

div capture 
input capture 
input noncapture 
div noncapture 

This is how React behaves

Actual Behavior

div capture 
input capture 
input capture 
div capture 

[marvinhagemeister]

Interesting! Both map to the same keydown event, but with different options passed to node.addEventListener(). Looks like we need a more generic way to differentiate them.

[devongovett]

preact/src/diff/props.js

Lines 92 to 104 in 952a7e2

	useCapture = name !== (name = name.replace(/Capture$/, ''));
	nameLower = name.toLowerCase();
	if (nameLower in dom) name = nameLower;
	name = name.slice(2);
	if (!dom._listeners) dom._listeners = {};
	dom._listeners[name] = value;
	if (value) {
	if (!oldValue) dom.addEventListener(name, eventProxy, useCapture);
	} else {
	dom.removeEventListener(name, eventProxy, useCapture);
	}

Maybe something in there? Capture gets removed from name on line 92. Then if you had both capture and not, dom._listeners[name] would overwrite each other.

[devongovett]

Attempted to make a PR for this #2740