keyboard not visible after dialog close

Hi @mmazzarolo, I am using react-native-modal v4.1.1 and RN v0.52.

I looked at issue #53 but I still having issues.

I am using Android (in iOS it works fine without onModalHide): When my modal dialog is shown the keyboard is hidden - which is the behavior I want. When the dialog is closed the keyboard never shows up again, even though I am staying in the same screen.

my component that contain the modal dialog looks like this:

class ComponentA extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isErrorDialogVisible: false,
        };
    }

    componentWillReceiveProps = (nextProps) => {
        is (nextProps.error) {
            this.setState({
                isErrorDialogVisible: true,
            });
        }
    }

    closeDialog = {
        this.setState({
            isErrorDialogVisible: false,
        })
    }

    render() {
        return(
            <View>
                <TextInput
                    .....
                />
                <Modal
                    isModalVisible={this.state.isErrorDialogVisible}
                    handleClick={this.closeDialog}
                />
            </View>
        )
    }
}

and my modal dialog component is something like:

export default class ModalDialog extends Component {

    onButtonClick = () => {
        this.props.handleClick();
    }

    render() {
        return(
            <View>
                <Modal
                    isVisible={this.props.isModalVisible}
                >
                    <View>
                        .....
                        <TouchableOpacity onPress={this.onButtonClick}>
                                ....
                        </TouchableOpacity>
                    </View>
                </Modal>
            </View>
        )
    }
}

After the dialog closes, I can see that closeDialog is called but the keyboard never pops up again? I tried to tried to regain focusthis.textInput.focus(); in componentWillUpdate method but with no luck.

using onModalHide method? Is there a way to call onButtonClick after onModalHide is called?

[ancyrweb]

This isn’t directly related to react-native-modal, but the way Modal works in RN. It seems you cannot have the keyboard out for an input focused behind a modal. And while the modal is closing, the modal isn’t closed yet, it animates and then close.

You have to wrap your focus function into a setTimeout and wait for a few milliseconds before focusing on the input (0ms doesn’t work, 1ms seems to be ok).

The best I could do is to delay the moment we call onModalHide to the very last moment. We cannot inside the library wrap it into a setTimeout, this would just patch a few use cases and we would have to carry this fix around while it’s not supposed to be our problem.

This is addressed in https://github.com/react-native-community/react-native-modal/commit/a032d4d061a2a3d73092e7b42d295e64bf80efa4 and will be shipped in the next release.

[evanjmg]

There’s a better workaround. Run InteractionManager.runAfterInteractions(()=>{}) and inside it will be your focus event

On Mar 22, 2019, at 4:43 PM, Anthony Cyrille [e-mail] wrote:

This isn’t directly related to react-native-modal, but the way Modal works in RN. It seems you cannot have the keyboard out for an input focused behind a modal. And while the modal is closing, the modal isn’t closed yet, it animates and then close.

You have to wrap your focus function into a setTimeout and wait for the animation to finish (check the value of the animationOutTiming) + a few milliseconds before focusing on the input.

The best I could do is to delay the moment we call onModalHide to the very last moment. We cannot inside the library wrap it into a setTimeout, this would just patch a few use cases and we would have to carry this fix around while it’s not supposed to be our problem.

This is addressed in a032d4d and will be shipped in the next release.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.