Skip to content

Commit 229eaad

Browse files
committed
fix: dont prevent internal clicks, fixes #3
1 parent ad2c6cc commit 229eaad

File tree

2 files changed

+7
-4
lines changed

2 files changed

+7
-4
lines changed

example/app.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default class App extends Component <{}, AppState> {
4343
<GHCorner openInNewTab href={repoUrl}/>
4444
<button>outside</button>
4545
outside
46-
46+
<button onClick={()=>alert('ok')}>test outside event</button>
4747
<button onClick={toggle} ref={this.toggleRef}>toggle drop</button>
4848
<button onClick={toggle}>toggle drop 2</button>
4949
{on && <div style={{backgroundColor: '#EEE'}}>
@@ -54,6 +54,8 @@ export default class App extends Component <{}, AppState> {
5454
shards={[this.toggleRef, this.scrollRef]}
5555
>
5656
Holala!!
57+
<button onClick={()=>alert('ok')}>test inside event</button>
58+
<a href="http://github.com">link</a>
5759
<button onClick={toggle}>close</button>
5860
<ScrollBox>innerbox</ScrollBox>
5961
</FocusOn>

src/component.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,10 @@ const extractRef = (ref: React.RefObject<any> | HTMLElement): HTMLElement => (
2828

2929
export class ReactFocusOn extends Component<ReactFocusOnProps> {
3030
private _undo?: () => void;
31+
private lastEventTarget?: EventTarget;
3132

3233
private lockProps = {
33-
onClick: (e: React.MouseEvent) => e.preventDefault(),
34+
onClick: (e: React.MouseEvent) => this.lastEventTarget = e.target
3435
};
3536

3637
private onActivation = (node: HTMLElement) => {
@@ -47,7 +48,7 @@ export class ReactFocusOn extends Component<ReactFocusOnProps> {
4748
document.addEventListener('click', this.onClick);
4849
};
4950

50-
private onDeactivation = (node: HTMLElement) => {
51+
private onDeactivation = () => {
5152
this._undo!();
5253
const {onDeactivation} = this.props;
5354
if (onDeactivation) {
@@ -69,7 +70,7 @@ export class ReactFocusOn extends Component<ReactFocusOnProps> {
6970

7071
private onClick = (event: MouseEvent) => {
7172
const {shards = [], onClickOutside} = this.props;
72-
if (event.defaultPrevented) {
73+
if (event.defaultPrevented || event.target === this.lastEventTarget) {
7374
return;
7475
}
7576
if (

0 commit comments

Comments
 (0)