From 11ea2ecba22abdaa1cfa4b1ff74e776c2e72ddaa Mon Sep 17 00:00:00 2001 From: Kai Guo Date: Tue, 11 Feb 2020 15:55:08 -0800 Subject: [PATCH 1/3] Cherry-pick fix for 4078 --- ...-12-03-45-touchable-focus-blur-events.json | 9 +++++++ packages/E2ETest/app/Consts.ts | 2 ++ packages/E2ETest/app/TextInputTestPage.tsx | 7 ++--- .../E2ETest/wdio/pages/TextInputTestPage.ts | 26 +++++++++++++++++++ packages/E2ETest/wdio/test/testInput.spec.ts | 11 ++++++++ .../TouchableWithoutFeedback.windows.js | 2 ++ 6 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 change/react-native-windows-2020-02-11-12-03-45-touchable-focus-blur-events.json diff --git a/change/react-native-windows-2020-02-11-12-03-45-touchable-focus-blur-events.json b/change/react-native-windows-2020-02-11-12-03-45-touchable-focus-blur-events.json new file mode 100644 index 00000000000..e182fa38af0 --- /dev/null +++ b/change/react-native-windows-2020-02-11-12-03-45-touchable-focus-blur-events.json @@ -0,0 +1,9 @@ +{ + "type": "none", + "comment": "Fix onFocus onBlur events", + "packageName": "react-native-windows", + "email": "kaigu@microsoft.com", + "commit": "38bc6cad5c3cdd7d1e00ac0e3a7185e12a2fa381", + "dependentChangeType": "patch", + "date": "2020-02-11T20:03:45.062Z" +} \ No newline at end of file diff --git a/packages/E2ETest/app/Consts.ts b/packages/E2ETest/app/Consts.ts index 1a5e46cc5ab..f406ca0bebb 100644 --- a/packages/E2ETest/app/Consts.ts +++ b/packages/E2ETest/app/Consts.ts @@ -13,7 +13,9 @@ export const UNKNOWN_TESTPAGE = 'UnknownTestPage'; export const TEXTINPUT_TESTPAGE = 'TextInputTestPage'; export const TEXTINPUT_ON_TEXTINPUT = 'TextInput'; +export const CURTEXT_ON_TEXTINPUT = 'CurTextInput'; export const PREVTEXT_ON_TEXTINPUT = 'PrevTextInput'; +export const PREV2TEXT_ON_TEXTINPUT = 'Prev2TextInput'; export const ML_TEXTINPUT_ON_TEXTINPUT = 'TextInputMultiLine'; export const CAP_TEXTINPUT_ON_TEXTINPUT = 'TextInputAutoCap'; diff --git a/packages/E2ETest/app/TextInputTestPage.tsx b/packages/E2ETest/app/TextInputTestPage.tsx index f8b64e7a71b..d26b3b82ee6 100644 --- a/packages/E2ETest/app/TextInputTestPage.tsx +++ b/packages/E2ETest/app/TextInputTestPage.tsx @@ -6,7 +6,8 @@ import React from 'react'; import {Text, TextInput, View} from 'react-native'; -import {TEXTINPUT_ON_TEXTINPUT, ML_TEXTINPUT_ON_TEXTINPUT, PREVTEXT_ON_TEXTINPUT, CAP_TEXTINPUT_ON_TEXTINPUT} from './Consts'; +import {TEXTINPUT_ON_TEXTINPUT, ML_TEXTINPUT_ON_TEXTINPUT, CURTEXT_ON_TEXTINPUT, + PREVTEXT_ON_TEXTINPUT, PREV2TEXT_ON_TEXTINPUT, CAP_TEXTINPUT_ON_TEXTINPUT} from './Consts'; interface ITextInputTestPageState { curText: string; @@ -80,9 +81,9 @@ export class TextInputTestPage extends React.Component< autoCapitalize="characters" /> - curText: {this.state.curText} + curText: {this.state.curText} prev: {this.state.prevText} - prev2: {this.state.prev2Text}) + prev2: {this.state.prev2Text}) prev3: {this.state.prev3Text} diff --git a/packages/E2ETest/wdio/pages/TextInputTestPage.ts b/packages/E2ETest/wdio/pages/TextInputTestPage.ts index 72a38f00879..e6f8ca68916 100644 --- a/packages/E2ETest/wdio/pages/TextInputTestPage.ts +++ b/packages/E2ETest/wdio/pages/TextInputTestPage.ts @@ -9,6 +9,8 @@ import { ML_TEXTINPUT_ON_TEXTINPUT, CAP_TEXTINPUT_ON_TEXTINPUT, PREVTEXT_ON_TEXTINPUT, + PREV2TEXT_ON_TEXTINPUT, + CURTEXT_ON_TEXTINPUT, } from '../../app/Consts'; class TextInputTestPage extends BasePage { @@ -16,6 +18,14 @@ class TextInputTestPage extends BasePage { return super.isPageLoaded() && this.textInput.isDisplayed(); } + clickTextInput() { + this.textInput.click(); + } + + clickMultilineTextInput() { + this.multiLineTextInput.click(); + } + clearAndTypeOnTextInput(text: string) { this.textInput.setValue(text); } @@ -39,10 +49,18 @@ class TextInputTestPage extends BasePage { this.multiLineTextInput.addValue(text); } + getTextInputCurText() { + return this.curTextInput.getText(); + } + getTextInputPrevText() { return this.prevTextInput.getText(); } + getTextInputPrev2Text() { + return this.prev2TextInput.getText(); + } + getTextInputText() { return this.textInput.getText(); } @@ -59,10 +77,18 @@ class TextInputTestPage extends BasePage { return By(TEXTINPUT_ON_TEXTINPUT); } + private get curTextInput() { + return By(CURTEXT_ON_TEXTINPUT); + } + private get prevTextInput() { return By(PREVTEXT_ON_TEXTINPUT); } + private get prev2TextInput() { + return By(PREV2TEXT_ON_TEXTINPUT); + } + private get multiLineTextInput() { return By(ML_TEXTINPUT_ON_TEXTINPUT); } diff --git a/packages/E2ETest/wdio/test/testInput.spec.ts b/packages/E2ETest/wdio/test/testInput.spec.ts index 170495522ea..4e174e06bd7 100644 --- a/packages/E2ETest/wdio/test/testInput.spec.ts +++ b/packages/E2ETest/wdio/test/testInput.spec.ts @@ -13,9 +13,20 @@ beforeAll(() => { }); describe('First', () => { + it('Click on TextInput to focus', () => { + TextInputTestPage.clickTextInput(); + assert.ok(TextInputTestPage.getTextInputCurText().includes('onFocus')); + }); + + it('Click on multiline TextInput to move focus away from single line TextInput', () => { + TextInputTestPage.clickMultilineTextInput(); + assert.ok(TextInputTestPage.getTextInputPrevText().includes('onBlur')); + }); + it('Type abc on TextInput', () => { TextInputTestPage.clearAndTypeOnTextInput('abc'); assert.equal(TextInputTestPage.getTextInputText(), 'abc'); + assert.ok(TextInputTestPage.getTextInputPrev2Text().includes('onKeyPress')); }); it('Type def on TextInput', () => { diff --git a/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js b/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js index e9bec9c0986..410aa6b4103 100644 --- a/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js +++ b/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js @@ -318,6 +318,8 @@ const TouchableWithoutFeedback = ((createReactClass({ onResponderMove: this.touchableHandleResponderMove, onResponderRelease: this.touchableHandleResponderRelease, onResponderTerminate: this.touchableHandleResponderTerminate, + onKeyUp: this._onKeyUp, + onKeyDown: this._onKeyDown, tooltip: this.props.tooltip, // TODO(macOS/win ISS#2323203) clickable: this.props.clickable !== false && this.props.onPress !== undefined, // TODO(android ISS) From 6b635158c8f5f35c7e711db4ae839853eb809498 Mon Sep 17 00:00:00 2001 From: Jason Gorringe Date: Thu, 20 Feb 2020 13:04:35 -0800 Subject: [PATCH 2/3] Remove duplicate keys --- .../Components/Touchable/TouchableWithoutFeedback.windows.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js b/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js index 410aa6b4103..e9bec9c0986 100644 --- a/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js +++ b/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js @@ -318,8 +318,6 @@ const TouchableWithoutFeedback = ((createReactClass({ onResponderMove: this.touchableHandleResponderMove, onResponderRelease: this.touchableHandleResponderRelease, onResponderTerminate: this.touchableHandleResponderTerminate, - onKeyUp: this._onKeyUp, - onKeyDown: this._onKeyDown, tooltip: this.props.tooltip, // TODO(macOS/win ISS#2323203) clickable: this.props.clickable !== false && this.props.onPress !== undefined, // TODO(android ISS) From 6bcaf1c5462d439032b6762c29174884d2d71d09 Mon Sep 17 00:00:00 2001 From: Jason Gorringe Date: Thu, 20 Feb 2020 15:59:23 -0800 Subject: [PATCH 3/3] Remove onFocus and onBlur events --- .../Components/Touchable/TouchableWithoutFeedback.windows.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js b/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js index e9bec9c0986..c3652067ce0 100644 --- a/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js +++ b/vnext/src/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js @@ -286,8 +286,6 @@ const TouchableWithoutFeedback = ((createReactClass({ return (React: any).cloneElement(child, { onKeyUp: this._onKeyUp, onKeyDown: this._onKeyDown, - onFocus: this.props.onFocus, - onBlur: this.props.onBlur, accessible: this.props.accessible !== false, accessibilityLabel: this.props.accessibilityLabel, accessibilityHint: this.props.accessibilityHint,