Apparently this isn't checked in to the open source repo, but I wrote an integration test for this code on Android at one point. You may want to reuse this:

/**
 * (c) Facebook, Inc. and its affiliates. Confidential and proprietary.
 *
 * @flow strict-local
 * @format
 */

'use strict';

import {ScrollView, StyleSheet, TextInput, View} from 'react-native';
import * as React from 'react';

function useFocusIndicator(
  name,
  dependency,
): [
  {|current: ?React.ElementRef<typeof TextInput>|},
  React.Element<typeof View>,
] {
  const inputRef = React.useRef<?React.ElementRef<typeof TextInput>>(null);
  const [focused, setFocused] = React.useState<boolean>(false);

  React.useEffect(() => {
    if (inputRef.current != null) {
      setFocused(inputRef.current.isFocused());
    }
  }, [dependency]);

  const indicator = (
    <View
      testID={`${name}_indicator`}
      style={{
        backgroundColor: focused ? 'lime' : 'red',
        width: 50,
        height: 50,
        margin: 5,
      }}
    />
  );

  return [inputRef, indicator];
}

function TextInputFocusBlurApp(props: {...}): React.Element<typeof ScrollView> {
  const [counter, setCounter] = React.useState(0);

  const [inputRef1, indicator1] = useFocusIndicator('ti_1', counter);
  const [inputRef2, indicator2] = useFocusIndicator('ti_2', counter);

  return (
    <ScrollView keyboardShouldPersistTaps="handled">
      <View style={styles.container}>
        <View
          testID="safe_target"
          style={{backgroundColor: '#ccc', width: 100, height: 100}}
        />
        <View style={styles.row}>
          <TextInput
            testID="ti_1"
            ref={inputRef1}
            onFocus={() => setCounter(count => count + 1)}
            onBlur={() => setCounter(count => count + 1)}
            placeholder="input 1"
            returnKeyType="next"
            style={styles.input}
          />
          {indicator1}
        </View>
        <View style={styles.row}>
          <TextInput
            testID="ti_2"
            ref={inputRef2}
            onFocus={() => setCounter(count => count + 1)}
            onBlur={() => setCounter(count => count + 1)}
            placeholder="input 2"
            returnKeyType="done"
            style={styles.input}
          />
          {indicator2}
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    padding: 10,
    paddingTop: 30,
  },
  input: {
    borderColor: '#eee',
    borderWidth: 1,
    padding: 5,
    margin: 5,
  },
  row: {
    flexDirection: 'row',
  },
});

export default TextInputFocusBlurApp;

// (c) Facebook, Inc. and its affiliates. Confidential and proprietary.

package com.facebook.react;

import android.view.View;
import com.facebook.react.testing.ReactAppInstrumentationTestCase;
import com.facebook.react.views.textinput.ReactEditText;
import com.facebook.react.views.view.ReactViewBackgroundDrawable;

public class TextInputFocusBlurTestCase extends ReactAppInstrumentationTestCase {

  public void testTextInputStartsBlurred() throws Throwable {
    final ReactEditText editText1 = getViewByTestId("ti_1");
    final ReactEditText editText2 = getViewByTestId("ti_2");
    final View indicator1 = getViewByTestId("ti_1_indicator");
    final View indicator2 = getViewByTestId("ti_2_indicator");

    getInstrumentation().waitForIdleSync();
    waitForBridgeAndUIIdle();

    assertFalse(editText1.isFocused());
    assertFalse(editText2.isFocused());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator1.getBackground()).getColor());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator2.getBackground()).getColor());
  }

  public void testTextInputIsFocusedWhenTapped() throws Throwable {
    final ReactEditText editText1 = getViewByTestId("ti_1");
    final ReactEditText editText2 = getViewByTestId("ti_2");
    final View indicator1 = getViewByTestId("ti_1_indicator");
    final View indicator2 = getViewByTestId("ti_2_indicator");

    tapOnView(editText1);

    getInstrumentation().waitForIdleSync();
    waitForBridgeAndUIIdle();

    assertTrue(editText1.isFocused());
    assertFalse(editText2.isFocused());

    assertEquals(
        android.graphics.Color.GREEN,
        ((ReactViewBackgroundDrawable) indicator1.getBackground()).getColor());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator2.getBackground()).getColor());
  }

  public void testTextInputChangesFocusedWhenTapped() throws Throwable {
    final ReactEditText editText1 = getViewByTestId("ti_1");
    final ReactEditText editText2 = getViewByTestId("ti_2");
    final View indicator1 = getViewByTestId("ti_1_indicator");
    final View indicator2 = getViewByTestId("ti_2_indicator");

    tapOnView(editText1);
    tapOnView(editText2);

    getInstrumentation().waitForIdleSync();
    waitForBridgeAndUIIdle();

    assertFalse(editText1.isFocused());
    assertTrue(editText2.isFocused());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator1.getBackground()).getColor());

    assertEquals(
        android.graphics.Color.GREEN,
        ((ReactViewBackgroundDrawable) indicator2.getBackground()).getColor());
  }

  public void testTextInputBlursWhenTappingInScrollView() throws Throwable {
    final View safeTarget = getViewByTestId("safe_target");
    final ReactEditText editText1 = getViewByTestId("ti_1");
    final ReactEditText editText2 = getViewByTestId("ti_2");
    final View indicator1 = getViewByTestId("ti_1_indicator");
    final View indicator2 = getViewByTestId("ti_2_indicator");

    tapOnView(editText1);
    tapOnView(editText2);
    tapOnView(safeTarget);

    getInstrumentation().waitForIdleSync();
    waitForBridgeAndUIIdle();

    assertFalse(editText1.isFocused());
    assertFalse(editText2.isFocused());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator1.getBackground()).getColor());

    assertEquals(
        android.graphics.Color.RED,
        ((ReactViewBackgroundDrawable) indicator2.getBackground()).getColor());
  }

  private void tapOnView(View view) {
    assertNotNull(view);
    int[] viewLocation = new int[2];
    view.getLocationOnScreen(viewLocation);
    createGestureGenerator()
        .startGesture((float) viewLocation[0] + 1.f, (float) viewLocation[1] + 1.f)
        .endGesture();
  }

  @Override
  protected String getReactApplicationKeyUnderTest() {
    return "TextInputFocusBlurTestModule";
  }
}

Focus events #272

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions