fix(events): add useCapture to events attached to document (#202)

TheSharpieOne · eddywashere · commit 18d7d044f0b6 · 2016-10-24T22:53:16.000-04:00
diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -105,11 +105,11 @@ class Dropdown extends React.Component {
   }
 
   addEvents() {
-    document.addEventListener('click', this.handleDocumentClick);
+    document.addEventListener('click', this.handleDocumentClick, true);
   }
 
   removeEvents() {
-    document.removeEventListener('click', this.handleDocumentClick);
+    document.removeEventListener('click', this.handleDocumentClick, true);
   }
 
   handleDocumentClick(e) {
diff --git a/src/TetherContent.js b/src/TetherContent.js
@@ -80,7 +80,7 @@ class TetherContent extends React.Component {
   }
 
   hide() {
-    document.removeEventListener('click', this.handleDocumentClick);
+    document.removeEventListener('click', this.handleDocumentClick, true);
 
     if (this._element) {
       document.body.removeChild(this._element);
@@ -96,7 +96,7 @@ class TetherContent extends React.Component {
   }
 
   show() {
-    document.addEventListener('click', this.handleDocumentClick);
+    document.addEventListener('click', this.handleDocumentClick, true);
 
     this._element = document.createElement('div');
     document.body.appendChild(this._element);
diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -156,15 +156,15 @@ class Tooltip extends React.Component {
   }
 
   addTargetEvents() {
-    this._target.addEventListener('mouseover', this.onMouseOverTooltip);
-    this._target.addEventListener('mouseout', this.onMouseLeaveTooltip);
-    document.addEventListener('click', this.handleDocumentClick);
+    this._target.addEventListener('mouseover', this.onMouseOverTooltip, true);
+    this._target.addEventListener('mouseout', this.onMouseLeaveTooltip, true);
+    document.addEventListener('click', this.handleDocumentClick, true);
   }
 
   removeTargetEvents() {
-    this._target.removeEventListener('mouseover', this.onMouseOverTooltip);
-    this._target.removeEventListener('mouseout', this.onMouseLeaveTooltip);
-    document.removeEventListener('click', this.handleDocumentClick);
+    this._target.removeEventListener('mouseover', this.onMouseOverTooltip, true);
+    this._target.removeEventListener('mouseout', this.onMouseLeaveTooltip, true);
+    document.removeEventListener('click', this.handleDocumentClick, true);
   }
 
   toggle(e) {

Original file line number	Diff line number	Diff line change
`@@ -105,11 +105,11 @@ class Dropdown extends React.Component {`
`105`	`105`	`}`
`106`	`106`
`107`	`107`	`addEvents() {`
`108`		`- document.addEventListener('click', this.handleDocumentClick);`
	`108`	`+ document.addEventListener('click', this.handleDocumentClick, true);`
`109`	`109`	`}`
`110`	`110`
`111`	`111`	`removeEvents() {`
`112`		`- document.removeEventListener('click', this.handleDocumentClick);`
	`112`	`+ document.removeEventListener('click', this.handleDocumentClick, true);`
`113`	`113`	`}`
`114`	`114`
`115`	`115`	`handleDocumentClick(e) {`
Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@ class TetherContent extends React.Component {`
`80`	`80`	`}`
`81`	`81`
`82`	`82`	`hide() {`
`83`		`- document.removeEventListener('click', this.handleDocumentClick);`
	`83`	`+ document.removeEventListener('click', this.handleDocumentClick, true);`
`84`	`84`
`85`	`85`	`if (this._element) {`
`86`	`86`	`document.body.removeChild(this._element);`
`@@ -96,7 +96,7 @@ class TetherContent extends React.Component {`
`96`	`96`	`}`
`97`	`97`
`98`	`98`	`show() {`
`99`		`- document.addEventListener('click', this.handleDocumentClick);`
	`99`	`+ document.addEventListener('click', this.handleDocumentClick, true);`
`100`	`100`
`101`	`101`	`this._element = document.createElement('div');`
`102`	`102`	`document.body.appendChild(this._element);`
Original file line number	Diff line number	Diff line change
`@@ -156,15 +156,15 @@ class Tooltip extends React.Component {`
`156`	`156`	`}`
`157`	`157`
`158`	`158`	`addTargetEvents() {`
`159`		`- this._target.addEventListener('mouseover', this.onMouseOverTooltip);`
`160`		`- this._target.addEventListener('mouseout', this.onMouseLeaveTooltip);`
`161`		`- document.addEventListener('click', this.handleDocumentClick);`
	`159`	`+ this._target.addEventListener('mouseover', this.onMouseOverTooltip, true);`
	`160`	`+ this._target.addEventListener('mouseout', this.onMouseLeaveTooltip, true);`
	`161`	`+ document.addEventListener('click', this.handleDocumentClick, true);`
`162`	`162`	`}`
`163`	`163`
`164`	`164`	`removeTargetEvents() {`
`165`		`- this._target.removeEventListener('mouseover', this.onMouseOverTooltip);`
`166`		`- this._target.removeEventListener('mouseout', this.onMouseLeaveTooltip);`
`167`		`- document.removeEventListener('click', this.handleDocumentClick);`
	`165`	`+ this._target.removeEventListener('mouseover', this.onMouseOverTooltip, true);`
	`166`	`+ this._target.removeEventListener('mouseout', this.onMouseLeaveTooltip, true);`
	`167`	`+ document.removeEventListener('click', this.handleDocumentClick, true);`
`168`	`168`	`}`
`169`	`169`
`170`	`170`	`toggle(e) {`