kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-04-30 05:14:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

[fix] TextInput focus/blur management

Browse Source 
1. Focusing/blurring a TextInput should update TextInputState.
2. Using the focus/blur instance methods should trigger related events.

Close #715
This commit is contained in:
Nicolas Gallagher
2017-11-15 15:15:22 -08:00
parent 214121480e
commit 117ce59f27
2 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/TextInput/TextInputState.js
View File

@@ -40,9 +40,11 @@ const TextInputState = {
* noop if the text field was already focused * noop if the text field was already focused
*/ */
focusTextInput(textFieldNode: ?Object) { focusTextInput(textFieldNode: ?Object) {
if (document.activeElement !== textFieldNode && textFieldNode !== null) { if (textFieldNode !== null) {
this._currentlyFocusedNode = textFieldNode; this._currentlyFocusedNode = textFieldNode;
UIManager.focus(textFieldNode); if (document.activeElement !== textFieldNode) {
UIManager.focus(textFieldNode);
}
} }
}, },
@@ -52,9 +54,11 @@ const TextInputState = {
* noop if it wasn't focused * noop if it wasn't focused
*/ */
blurTextInput(textFieldNode: ?Object) { blurTextInput(textFieldNode: ?Object) {
if (document.activeElement === textFieldNode && textFieldNode !== null) { if (textFieldNode !== null) {
this._currentlyFocusedNode = null; this._currentlyFocusedNode = null;
UIManager.blur(textFieldNode); if (document.activeElement === textFieldNode) {
UIManager.blur(textFieldNode);
}
} }
} }
}; };

10
src/components/TextInput/index.js
View File

@@ -150,18 +150,12 @@ class TextInput extends Component {
static State = TextInputState; static State = TextInputState;
blur() { blur: Function;
TextInputState.blurTextInput(this._node);
}
clear() { clear() {
this._node.value = ''; this._node.value = '';
} }
focus() {
TextInputState.focusTextInput(this._node);
}
isFocused() { isFocused() {
return TextInputState.currentlyFocusedField() === this._node; return TextInputState.currentlyFocusedField() === this._node;
} }
@@ -270,6 +264,7 @@ class TextInput extends Component {
_handleBlur = e => { _handleBlur = e => {
const { onBlur } = this.props; const { onBlur } = this.props;
TextInputState.blurTextInput(this._node);
if (onBlur) { if (onBlur) {
onBlur(e); onBlur(e);
} }
@@ -289,6 +284,7 @@ class TextInput extends Component {
_handleFocus = e => { _handleFocus = e => {
const { clearTextOnFocus, onFocus, selectTextOnFocus } = this.props; const { clearTextOnFocus, onFocus, selectTextOnFocus } = this.props;
const node = this._node; const node = this._node;
TextInputState.focusTextInput(this._node);
if (onFocus) { if (onFocus) {
onFocus(e); onFocus(e);
} }