Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TextInput.blur is not working if with Alert on iOS #23076

Closed
jaychsu opened this issue Jan 19, 2019 · 2 comments
Closed

TextInput.blur is not working if with Alert on iOS #23076

jaychsu opened this issue Jan 19, 2019 · 2 comments
Labels
API: Alert Bug Component: TextInput Related to the TextInput component. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.

Comments

@jaychsu
Copy link
Contributor

jaychsu commented Jan 19, 2019 •
edited
Loading

Environment

% react-native info
  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
      Memory: 371.81 MB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node
      Yarn: 1.12.3 - ~/.nvm/versions/node/v8.11.1/bin/yarn
      npm: 6.5.0 - ~/.nvm/versions/node/v8.11.1/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 28
        Build Tools: 28.0.3
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0 
      react-native: https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz => 0.57.1

Description

  • on iOS: It's so stranger TextInput.blur was explicitly called but not working if used in Alert.alert. And it got work if without Alert.alert.
  • on Android: it's totally working.

Reproducible Demo

https://snack.expo.io/@jaychsu/issue-reproduction-for-reactnative
@react-native-bot react-native-bot added API: Alert 🔶APIs Component: TextInput Related to the TextInput component. labels Jan 19, 2019
@react-native-bot
Copy link
Collaborator

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

@jaychsu
Copy link
Contributor Author

jaychsu commented Jan 20, 2019

I temporarily use a workaround by making Alert.alert() asynchronous, also shown in the reproducible demo.

this.$input && this.$input.blur()
setTimeout(() => Alert.alert('show alert', 'desc', [
  { text: 'cancel', style: 'cancel' },
  { text: 'show', onPress: () => { 
    console.log('shown!!')
  }},
]), 0)

@jaychsu jaychsu changed the title TextInput.blur is not working if with Alert TextInput.blur is not working if with Alert on iOS Jan 20, 2019
@react-native-bot react-native-bot added the Platform: iOS iOS applications. label Jan 20, 2019
@zhongwuzw zhongwuzw mentioned this issue Feb 1, 2019
Closed
matt-oakes pushed a commit to matt-oakes/react-native that referenced this issue Feb 7, 2019
@zhongwuzw @facebook-github-bot
Fixes alert view block first responder (facebook#23240)
2d4afc1 
Summary:
Fixes facebook#23076 , the reason is `blur()` is managed by `UIManager`, `UIManager` maintains all operations and execute them each `batchDidComplete`, which means every time `JS` finish callback native , but `Alert` module would call directly, this mess up the order of method call, for example like below, even `this.$input.blur()` is called before `Alert.alert()`, but in native side, `Alert.alert()` is called before `this.$input.blur()`.

```
        <TextInput style={{ borderWidth: 1 }} ref={$input => this.$input = $input} />
        <Button title="Show Alert" onPress={() => {
          // // `blur` works if using without `Alert`
          this.$input && this.$input.blur()
          // // `blur` is not working
          Alert.alert('show alert', 'desc', [
            { text: 'cancel', style: 'cancel' },
            { text: 'show', onPress: () => {
            }},
          ])
        }} />
```

[iOS] [Fixed] - Fixes alert view block first responder

After fix, example like below, `blur` can works.
```
import * as React from 'react';
import { TextInput, View, Alert, Button } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center' }}>
        <TextInput style={{ borderWidth: 1 }} ref={$input => this.$input = $input} />
        <Button title="Show Alert" onPress={() => {
          this.$input && this.$input.blur()
          Alert.alert('show alert', 'desc', [
            { text: 'cancel', style: 'cancel' },
            { text: 'show', onPress: () => {
            }},
          ])
        }} />
      </View>
    );
  }
}
```
Pull Request resolved: facebook#23240

Differential Revision: D13915920

Pulled By: cpojer

fbshipit-source-id: fe1916fcb5913e2b8128d045a6364c5e3d39c516
@facebook facebook locked as resolved and limited conversation to collaborators Feb 1, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Feb 1, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
API: Alert Bug Component: TextInput Related to the TextInput component. Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[iOS] Fixes alert view block first responder zhongwuzw/react-native
3 participants
@hramos @jaychsu @react-native-bot