Skip to content

[Android] TextInput's padding is ignored when sibling suspends #27307

@Lukas-Kullmann

Description

@Lukas-Kullmann

React Native version: 0.61.4
OS: Android only

Steps To Reproduce

  1. Have a <TextInput style={{paddingLeft: 20}} /> in the same suspense border as a suspending component
  2. Mount the parent component
  3. The padding is not applied to the text input
  4. Re-render the component (e.g. by changing state)
  5. The padding is applied

Describe what you expected to happen:

The padding is applied to the text input.

Snack, code example, screenshot, or link to a repository:

App.js

import React, {Suspense, useState} from 'react';
import {TextInput} from 'react-native';
import SuspendingComponent from './SuspendingComponent';

const App = () => {
  const [value, setValue] = useState('');

  return (
    <Suspense fallback={null}>
      <SuspendingComponent />
      <TextInput
        placeholder="Test placeholder"
        value={value}
        onChange={({nativeEvent: {text}}) => setValue(text)}
        style={{width: '100%', paddingLeft: 20, borderWidth: 1}}
      />
    </Suspense>
  );
};

export default App;

SuspendingComponent.js

let value = false;

const SuspendingComponent = () => {
  if (!value) {
    throw Promise.resolve().then(() => {
      value = true;
    });
  }

  return null;
};

export default SuspendingComponent;

This is how it looks like after mount:
after-mount
Note that the placeholder is moved all the way left, even though the text input has a padding of 20.

Then you start typing (the state update makes the text input re-render) and the padding is applied:
after-update

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugComponent: TextInputRelated to the TextInput component.Platform: AndroidAndroid applications.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions