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.

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

[iOS] Fixes alert view block first responder #23240

Closed
wants to merge 1 commit into from

Conversation

Projects
None yet
5 participants
@zhongwuzw
Copy link
Collaborator

commented Feb 1, 2019

Summary

Fixes #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: () => {
            }},
          ])
        }} />

Changelog

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

Test Plan

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>
    );
  }
}
@cpojer

cpojer approved these changes Feb 1, 2019

@facebook-github-bot
Copy link

left a comment

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@react-native-bot

This comment has been minimized.

Copy link
Collaborator

commented Feb 1, 2019

@zhongwuzw merged commit e4364fa into facebook:master.

@facebook facebook locked as resolved and limited conversation to collaborators Feb 1, 2019

matt-oakes pushed a commit to matt-oakes/react-native that referenced this pull request Feb 7, 2019

Fixes alert view block first responder (facebook#23240)
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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.