Markdown input doesn't fully scroll itself into view on focus
Opened this issue · 0 comments
Skalakid commented
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',
},
});