From 5964d866be1ebb1755f63b1be74039ce2b680080 Mon Sep 17 00:00:00 2001 From: Roderick Hsiao Date: Wed, 4 Aug 2021 15:33:21 -0700 Subject: [PATCH] Fix event target (#391) * Fix event target --- package.json | 2 +- src/libs/clickHandler.js | 12 ++++++------ src/libs/tests/clickHandler.test.js | 23 ++++++++++++----------- src/utils/isUndefined.js | 2 +- 4 files changed, 20 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 1b6e8608..4f69b3c7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "react-i13n", "description": "React I13n provides a performant and scalable solution to application instrumentation.", - "version": "3.0.0-alpha.7", + "version": "3.0.0-alpha.8", "main": "index.js", "module": "index.es.js", "repository": { diff --git a/src/libs/clickHandler.js b/src/libs/clickHandler.js index 93a080c4..b1e1f2f5 100644 --- a/src/libs/clickHandler.js +++ b/src/libs/clickHandler.js @@ -2,13 +2,13 @@ * Copyright 2015 - Present, Yahoo Inc. * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms. */ -const isLeftClickEvent = e => e.button === 0; -const isModifiedEvent = e => !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey); +const isLeftClickEvent = (e) => e.button === 0; +const isModifiedEvent = (e) => !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey); const getLinkTarget = (target, props) => props.target || (target?.target) || '_self'; const isNewWindow = (target, props) => getLinkTarget(target, props) === '_blank'; -const isLink = target => target.tagName === 'A'; +const isLink = (target) => target.tagName === 'A'; const isButtonLike = (target) => { const { tagName, type } = target; if (tagName === 'BUTTON') { @@ -37,7 +37,7 @@ const isFormSubmit = (target) => { // if it's a // 1. button // 2. input with submit or button type - if (isButtonLike(target)) { + if (isButtonLike(target) && target.type === 'submit') { return true; } return false; @@ -49,7 +49,7 @@ const isFormSubmit = (target) => { * @method ClickHandler */ const clickHandler = (e, options = {}) => { - const target = e.target || e.srcElement; + const target = e.currentTarget; const isForm = isFormSubmit(target); let isRedirectLink = isDefaultRedirectLink(target); @@ -79,7 +79,7 @@ const clickHandler = (e, options = {}) => { if ( (!isDefaultRedirectLink(target)) || (isLink(target) && (!href || (href && href[0] === '#'))) - || (isButtonLike(target) && !target.form) + || (isButtonLike(target) && !isForm) ) { isRedirectLink = false; isPreventDefault = false; diff --git a/src/libs/tests/clickHandler.test.js b/src/libs/tests/clickHandler.test.js index b120ae3d..8b5dcafc 100644 --- a/src/libs/tests/clickHandler.test.js +++ b/src/libs/tests/clickHandler.test.js @@ -37,7 +37,7 @@ describe('clickHandler', () => { }; mockClickEvent = { - target: {}, + currentTarget: {}, button: 0, preventDefault: jest.fn() }; @@ -72,7 +72,7 @@ describe('clickHandler', () => { done(); }; - mockClickEvent.target = { + mockClickEvent.currentTarget = { tagName: 'A', href: 'https://foobar.com' }; @@ -88,8 +88,9 @@ describe('clickHandler', () => { it('should run click handler correctly if target is an button', (done) => { const executedActions = []; - mockClickEvent.target = { + mockClickEvent.currentTarget = { tagName: 'BUTTON', + type: 'submit', form: { submit() { executedActions.push('submit'); @@ -111,7 +112,7 @@ describe('clickHandler', () => { it('should run click handler correctly if target is input with submit', (done) => { const executedActions = []; - mockClickEvent.target = { + mockClickEvent.currentTarget = { tagName: 'INPUT', type: 'submit', form: { @@ -135,7 +136,7 @@ describe('clickHandler', () => { it('should not follow it if follow is set to false', (done) => { const executedActions = []; - mockClickEvent.target = { + mockClickEvent.currentTarget = { tagName: 'A', href: 'https://foobar.com' }; @@ -154,7 +155,7 @@ describe('clickHandler', () => { it('should follow it while follow is set to true', (done) => { const executedActions = []; - mockClickEvent.target = { + mockClickEvent.currentTarget = { tagName: 'A', href: 'https://foobar.com' }; @@ -178,7 +179,7 @@ describe('clickHandler', () => { it('should simply execute event without prevent default and redirection if the link is #', (done) => { const executedActions = []; - mockClickEvent.target = { + mockClickEvent.currentTarget = { tagName: 'A' }; mockClickEvent.preventDefault = function () { @@ -196,7 +197,7 @@ describe('clickHandler', () => { it('should simply execute event without prevent default and redirection is a modified click', (done) => { const executedActions = []; - mockClickEvent.target = { + mockClickEvent.currentTarget = { tagName: 'A' }; mockClickEvent.metaKey = true; @@ -215,7 +216,7 @@ describe('clickHandler', () => { it('should simply execute event without prevent default and redirection if props.target=_blank', (done) => { const executedActions = []; - mockClickEvent.target = { + mockClickEvent.currentTarget = { tagName: 'SPAN' }; mockClickEvent.preventDefault = function () { @@ -237,7 +238,7 @@ describe('clickHandler', () => { executedActions.push('assign'); }; - mockClickEvent.target = { + mockClickEvent.currentTarget = { tagName: 'A', href: 'foo' }; @@ -262,7 +263,7 @@ describe('clickHandler', () => { executedActions.push('assign'); }; - mockClickEvent.target = { + mockClickEvent.currentTarget = { tagName: 'A', href: 'foo' }; diff --git a/src/utils/isUndefined.js b/src/utils/isUndefined.js index 7219b35c..f0c1107a 100644 --- a/src/utils/isUndefined.js +++ b/src/utils/isUndefined.js @@ -3,6 +3,6 @@ * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms. */ -const isUndefined = data => typeof data === 'undefined'; +const isUndefined = (data) => typeof data === 'undefined'; export default isUndefined;