Scroll offset does not include padding when component is focused on web

[Skalakid]

Objective

Fix scrolling into view markdown input on web, so it will show the whole component (including padding inside it) in every situation.

Current state

When focusing markdown text input on web that is near the bootom of scrollable area, page scrolls to markdown input however only to the bottom of the line where the caret is.

Video

bug.mov

Example app

App.tsx

import * as React from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';
import Composer from './Composer';

function createComposerData() {
  return Array.from({length: 10}, (_, i) => `Composer ${i + 1}`);
}

export default function App() {
  const [data, setData] = React.useState(createComposerData());
  return (
    <View style={styles.container}>
      <Text>Flatlist with composers</Text>
      <FlatList
        data={data}
        renderItem={({item}) => <Composer placeholder={item} />}
        style={styles.flatlist}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    marginTop: 60,
  },
  flatlist: {width: 300, height: 200, borderWidth: 1, borderColor: 'black'},
});

Composer.tsx

import * as React from 'react';
import type {TextInput} from 'react-native';
import {Button, View, StyleSheet} from 'react-native';
import {MarkdownTextInput} from '@expensify/react-native-live-markdown';

type ComposerProps = {
  placeholder: string;
};

export default function Composer({placeholder}: ComposerProps) {
  const ref = React.useRef<TextInput>(null);
  return (
    <View style={styles.container}>
      <MarkdownTextInput
        multiline
        autoCapitalize="none"
        style={styles.input}
        ref={ref}
        placeholder={placeholder}
      />
      <Button
        title="Focus"
        onPress={() => {
          if (!ref.current) {
            return;
          }
          ref.current.focus();
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    fontSize: 20,
    width: 300,
    padding: 20,
    borderColor: 'gray',
    borderWidth: 1,
    textAlignVertical: 'top',
  },
  container: {
    flexDirection: 'row',
  },
});

[tomekzaw]

@Skalakid Is this bug still current?

[tomekzaw]

According to @Skalakid this issue is still relevant

[Skalakid]

Still reproducible on the latest main