question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Keyboard can not dismiss after use Alert

See original GitHub issue

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 8.9.0 Yarn: not found npm: 5.5.1 Watchman: 4.9.0 Xcode: Xcode 9.1 Build version 9B55 Android Studio: 3.0 AI-171.4408382

Packages: (wanted => installed) react-native: 0.49.3 => 0.49.3 react: 16.0.0-beta.5 => 16.0.0-beta.5

Target Platform: iOS (10.3)

Steps to Reproduce

I have a screen with one Input, two buttons (one for dismiss keyboard and another for alert some dummy)

  1. Focus on Input
  2. Click button alert then dismiss alert dialog
  3. Click button dismiss keyboar

Expected Behavior

The keyboard should dismiss

Actual Behavior

The keyboard did not dismiss

Reproducible Demo

Code:


import React, { Component } from 'react'
import { TextInput, TouchableHighlight, Text, Alert } from 'react-native'

import DismissKeyboard from 'dismissKeyboard'
import Container from 'components/Container'

class Home extends Component {
  state = { text: '' }

  alert = () => {
    Alert.alert('Alert Title', 'Invalid input', [{ text: 'Ok' }])
  }

  render() {
    return (
      <Container center>
        <TextInput
          style={{ height: 40, width: 120, borderColor: 'gray', borderWidth: 1 }}
          onChangeText={text => this.setState({ text })}
          value={this.state.text}
        />

        <TouchableHighlight
          onPress={DismissKeyboard}
          style={{ borderWidth: 1, borderColor: '#fff', width: 100, height: 50 }}
        >
          <Text>hide keyboard</Text>
        </TouchableHighlight>

        <TouchableHighlight
          onPress={this.alert}
          style={{ borderWidth: 1, borderColor: '#fff', width: 100, height: 50 }}
        >
          <Text>alert</Text>
        </TouchableHighlight>
      </Container>
    )
  }
}

export default Home

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11

github_iconTop GitHub Comments

4reactions
10xSebastiancommented, Feb 8, 2018

@chiquyet199 The following solved the problem for me (work around):

setTimeout(function(){
   //... open your alert here
}, 50)
2reactions
krydoscommented, Dec 12, 2018

The issue is still here in 0.57.1. In my case I cannot use setTimeout because Alert that is popping up is called by password “suggester” (“Passwords” button - on top of the keyboard). When username and password are automatically filled in, the Keyboard.dismiss() isn’t working.

Read more comments on GitHub >

github_iconTop Results From Across the Web

I can't dismiss my keyboard in my react native app after an ...
I already tried to put Keyboard.dismiss() just before changing the screen and in the componentDidMount() of the second screen, without success.
Read more >
JavaScript
You can use all Bootstrap plugins purely through the markup API without writing ... $('#myModal').modal({ keyboard: false }) // initialized with no keyboard...
Read more >
How to Dismiss the Keyboard in Flutter the Right Way
If you've tried to dismiss the keyboard in a Flutter app by tapping outside of a form field and nothing happened, don't fret....
Read more >
Alert
Alerts on Android can be dismissed by tapping outside of the alert box. It is disabled by default and can be enabled by...
Read more >
Dismiss MacOS Big Sur notifications with keyboard
@AndrewJanian 's Script · 1. If notification is set to Banner type then it will be dismissed automatically after a while, no interaction...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found