Preparing 1.0.11 release

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.11] - 03-02-23
+
+### Changed
+
+- Add `useCapture` property to `EventListener` and `Keyboard` components, thereby fixing [#255](https://github.com/emilhe/dash-extensions/issues/255).
+
 ## [1.0.10] - 03-02-23
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-extensions",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Extensions for Plotly Dash.",
   "main": "build/index.js",
   "scripts": {

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "dash-extensions"
-version = "1.0.10"
+version = "1.0.11"
 description = "Extensions for Plotly Dash."
 authors = ["emher <[email protected]>"]
 license = "MIT"

src/lib/components/EventListener.react.js

@@ -35,12 +35,12 @@ export default class EventListener extends Component {
 
     componentDidMount() {
         const events = this.props.events.map(o => o["event"]);
-        this.getSources().forEach(s => events.forEach(e => s.addEventListener(e, this.eventHandler, false)));
+        this.getSources().forEach(s => events.forEach(e => s.addEventListener(e, this.eventHandler, this.props.useCapture)));
     }
 
     componentWillUnmount() {
         const events = this.props.events.map(o => o["event"]);
-        this.getSources().forEach(s => events.forEach(e => s.removeEventListener(e, this.eventHandler, false)));
+        this.getSources().forEach(s => events.forEach(e => s.removeEventListener(e, this.eventHandler, this.props.useCapture)));
     }
 
     render() {
@@ -55,6 +55,7 @@ EventListener.defaultProps = {
     event: {},
     n_events: 0,
     logging: false,
+    useCapture: false
 };
 
 EventListener.propTypes = {
@@ -107,6 +108,11 @@ EventListener.propTypes = {
     /**
      * The number of events fired.
      */
-    n_events: PropTypes.number
+    n_events: PropTypes.number,
+
+    /**
+     * Value of useCapture used when registering event listeners.
+     */
+    useCapture: PropTypes.bool
 
 };

src/lib/components/Keyboard.react.js

@@ -50,13 +50,13 @@ export default class Keyboard extends Component {
     }
 
     componentDidMount() {
-        this.getSources().forEach(s => s.addEventListener("keydown", this.keydownHandler, false));
-        this.getSources().forEach(s =>  s.addEventListener("keyup", this.keyupHandler, false));
+        this.getSources().forEach(s => s.addEventListener("keydown", this.keydownHandler, this.props.useCapture));
+        this.getSources().forEach(s =>  s.addEventListener("keyup", this.keyupHandler, this.props.useCapture));
     }
 
     componentWillUnmount() {
-        this.getSources().forEach(s => s.removeEventListener("keydown", this.keydownHandler, false));
-        this.getSources().forEach(s => s.removeEventListener("keyup", this.keyupHandler, false));
+        this.getSources().forEach(s => s.removeEventListener("keydown", this.keydownHandler, this.props.useCapture));
+        this.getSources().forEach(s => s.removeEventListener("keyup", this.keyupHandler, this.props.useCapture));
     }
 
     render() {
@@ -70,7 +70,8 @@ Keyboard.defaultProps = {
     eventProps: ["key", "altKey", "ctrlKey", "shiftKey","metaKey", "repeat"],
     n_keydowns: 0,
     n_keyups: 0,
-    keys_pressed: {}
+    keys_pressed: {},
+    useCapture: false
 };
 
 
@@ -143,7 +144,11 @@ Keyboard.propTypes = {
      /**
      * A counter, which is incremented on each key up event, similar to n_clicks for buttons.
      */
-    n_keyups: PropTypes.number
+    n_keyups: PropTypes.number,
 
+    /**
+     * Value of useCapture used when registering event listeners.
+     */
+    useCapture: PropTypes.bool
 
 };