Skip to content

Unexpected keyboard dismiss in ScrollView when soft keyboard appears. #16635

Closed
@jiaminglu

Description

@jiaminglu

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Scanning folders for symlinks in /Users/jiaminglu/test/node_modules (20ms)

Environment:
OS: macOS Sierra 10.12.6
Node: 8.2.1
Yarn: 0.27.5
npm: 5.3.0
Watchman: 4.9.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 3.0 AI-171.4408382

Packages:
react: 16.0.0-beta.5 => 16.0.0-beta.5
react-native: 0.49.5 => 0.49.5

Steps to Reproduce

  1. Use a TextInput inside a ScrollView, with keyboardDismissMode set to 'on-drag'
  2. Layout the TextInput at the bottom of the screen.
  3. Click the text input

Expected Behavior

The keyboard should appear.

Actual Behavior

The keyboard appears and then disappears immediately.

Reproducible Demo

  1. react-native init test
  2. replace App.js with:
import React, { Component } from 'react';
import { View, TextInput, ScrollView, Dimensions } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <ScrollView style={{flex: 1}} keyboardDismissMode='on-drag'>
        <View  style={{flex: 1}}>
          <TextInput defaultValue="Hello world" style={{
            marginTop: Dimensions.get('window').height - 50,
            height: 40,
            borderColor: 'black',
            borderWidth: 1,
          }}/>
        </View>
      </ScrollView>
    );
  }
}

Cause

When the TextInput clicked and soft keyboard appeared, the Android system pushes up the underlying EditText, and then the ScrollView detects a scroll event, dismissed the keyboard according to keyboardDismissMode="on-drag", which I think should be handled on onScrollBeginDrag instead.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions