From a7437710d25adfc9150fc079e4525ed59d5404e2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 31 Oct 2019 18:15:56 -0700 Subject: [PATCH] Fix for: You cannot blur a text-input if you tab to it. (#27038) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: I've been working on a new iOS experience with lots of text inputs and this has been driving me a bit nuts… If you're in a scrollview with `keyboardShouldPersistTaps="handled"` and you tab through your text-inputs, you aren't able to tap outside of a given text-input to blur it (and dismiss the keyboard). I wrote up a quick explanation and some repo steps here: https://snack.expo.io/BJBcKgrqB The patch i came up with, after poking around for a little bit seems terrifying - so almost certainly not it. But if it's helpful at all - decided to just got ahead and submit it. ## Changelog [iOS] [Fixed] - TextInput blur when tabbing in iOS simulator. Pull Request resolved: https://github.com/facebook/react-native/pull/27038 Test Plan: I tried to think of a way to test this in jest… but i didn't get very far sorry 😢 I did create a snack here so you can demo the issue: https://snack.expo.io/BJBcKgrqB I also created two videos… **Here's the text input not working when i try to blur it after tabbing in simulator** ![ezgif-1-dc85b405c760](https://user-images.githubusercontent.com/169705/67726290-8e5d2d00-f9a2-11e9-98c9-29c0b0bb25b9.gif) **Here's it working after I applied this patch** ![ezgif-1-ed9f6b19653d](https://user-images.githubusercontent.com/169705/67726309-97e69500-f9a2-11e9-9992-c2a79d0bd408.gif) Thanks! Differential Revision: D18262867 Pulled By: TheSavior fbshipit-source-id: 4087f3a27a7e6a146f7f84d7c6e9e8e2b6adc75d --- Libraries/Components/TextInput/TextInput.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 8276c80e834a86..3b64aabed4f37e 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -1095,6 +1095,7 @@ const TextInput = createReactClass({ }, _onFocus: function(event: FocusEvent) { + this.focus(); if (this.props.onFocus) { this.props.onFocus(event); }