fix: dont prevent internal clicks, fixes #3

theKashey · Apr 10, 2019 · 229eaad · 229eaad
1 parent ad2c6cc
commit 229eaad
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/example/app.tsx b/example/app.tsx
@@ -43,7 +43,7 @@ export default class App extends Component <{}, AppState> {
               <GHCorner openInNewTab href={repoUrl}/>
               <button>outside</button>
               outside
-
+              <button onClick={()=>alert('ok')}>test outside event</button>
               <button onClick={toggle} ref={this.toggleRef}>toggle drop</button>
               <button onClick={toggle}>toggle drop 2</button>
               {on && <div style={{backgroundColor: '#EEE'}}>
@@ -54,6 +54,8 @@ export default class App extends Component <{}, AppState> {
                   shards={[this.toggleRef, this.scrollRef]}
                 >
                   Holala!!
+                  <button onClick={()=>alert('ok')}>test inside event</button>
+                  <a href="http://github.com">link</a>
                   <button onClick={toggle}>close</button>
                   <ScrollBox>innerbox</ScrollBox>
                 </FocusOn>

diff --git a/src/component.tsx b/src/component.tsx
@@ -28,9 +28,10 @@ const extractRef = (ref: React.RefObject<any> | HTMLElement): HTMLElement => (
 
 export class ReactFocusOn extends Component<ReactFocusOnProps> {
   private _undo?: () => void;
+  private lastEventTarget?: EventTarget;
 
   private lockProps = {
-    onClick: (e: React.MouseEvent) => e.preventDefault(),
+    onClick: (e: React.MouseEvent) => this.lastEventTarget = e.target
   };
 
   private onActivation = (node: HTMLElement) => {
@@ -47,7 +48,7 @@ export class ReactFocusOn extends Component<ReactFocusOnProps> {
     document.addEventListener('click', this.onClick);
   };
 
-  private onDeactivation = (node: HTMLElement) => {
+  private onDeactivation = () => {
     this._undo!();
     const {onDeactivation} = this.props;
     if (onDeactivation) {
@@ -69,7 +70,7 @@ export class ReactFocusOn extends Component<ReactFocusOnProps> {
 
   private onClick = (event: MouseEvent) => {
     const {shards = [], onClickOutside} = this.props;
-    if (event.defaultPrevented) {
+    if (event.defaultPrevented || event.target === this.lastEventTarget) {
       return;
     }
     if (