Label is hidden when a multiline TextInput is focused on iOS

[ericpoulinnz]

Current behaviour

When focusing into a TextInput (at least when mode='flat'), the label disappears. It shows up normally when multiline=false, and this is only a problem on iOS.

Expected behaviour

For the label to be scaled down and shown as usual.

Preview

What have you tried so far?

I've traced the problem down to this code in TextInputFlat.tsx, commenting it out solves the problem.

{!isAndroid && multiline && !!label && !disabled && (
    // Workaround for: https://github.com/callstack/react-native-paper/issues/2799
    // Patch for a multiline TextInput with fixed height, which allow to avoid covering input label with its value.
    <View
      testID="patch-container"
      pointerEvents="none"
      style={[
        StyleSheet.absoluteFill,
        dense ? styles.densePatchContainer : styles.patchContainer,
        {
          backgroundColor:
            viewStyle.backgroundColor || containerStyle.backgroundColor, **// <-- commenting out this line fixes the issue.**
          left: paddingLeft,
          right: paddingRight,
        },
      ]}
    />
  )}

Your Environment

software	version
react-native	0.74.1
react-native-paper	5.12.5

[saadi-ninjasCode]

Facing the same issue only with flat mode, while working fine with outlined mode react-native 0.74.5 react-native-paper 5.12.5

[saadi-ninjasCode]

@ericpoulinnz if you comment the style for background. https://github.com/callstack/react-native-paper/issues/2799 this issue will re-exist

[ericpoulinnz]

@ericpoulinnz if you comment the style for background. #2799 this issue will re-exist

@saadi-ninjasCode Yeah obviously not the solution, just illustrating where the issue is happening in the code as far as I can see. Seems like a z-index issue or something.

[Michota]

It is still happenin gon 5.14.5.

In my opinion it is not completed