Skip to content

fix(text-input): apply flexShrink to root container to avoid parent b… #5140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Davilash wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(text-input): apply flexShrink to root container to avoid parent b… #5140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 10 additions & 9 deletions src/components/TextInput/TextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,7 @@ export type OutlinedTextInputHookData = SharedTextInputStyleData & {
};

export type TextInputLayoutData =
| FilledTextInputHookData
| OutlinedTextInputHookData;
FilledTextInputHookData | OutlinedTextInputHookData;

export type TextInputLayoutState = Omit<
TextInputLayoutData,
Expand All @@ -145,8 +144,7 @@ export type TextInputHookReturn = SharedTextInputStyleData & {
selectionColor: ColorValue;
cursorColor: ColorValue;
animatedActiveOutlineStyles:
| StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>
| undefined;
StyleProp<AnimatedStyle<StyleProp<ViewStyle>>> | undefined;
animatedContainerStyle: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
animatedLabelWrapperStyles: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
containerStyles: StyleProp<ViewStyle>;
Expand All @@ -158,11 +156,9 @@ export type TextInputHookReturn = SharedTextInputStyleData & {
counterText: string;
accessibilityProps: GetAccessibilityDataReturn;
renderLeadingAccessory:
| ((props: TextInputAccessoryProps) => React.ReactNode)
| undefined;
((props: TextInputAccessoryProps) => React.ReactNode) | undefined;
renderTrailingAccessory:
| ((props: TextInputAccessoryProps) => React.ReactNode)
| undefined;
((props: TextInputAccessoryProps) => React.ReactNode) | undefined;
onChangeText: (text: string) => void;
onFocus: (e: FocusEvent) => void;
onBlur: (e: BlurEvent) => void;
Expand Down Expand Up @@ -360,7 +356,12 @@ function TextInput({
});

return (
<Pressable onPress={focusInput} accessible={false} role="none">
<Pressable
onPress={focusInput}
accessible={false}
role="none"
style={styles.root}
>
<View style={fieldStyles}>
{/* Disabled tint overlay — filled variant only. A childless
absolutely-positioned View whose translucent fill is applied via the
Expand Down
3 changes: 3 additions & 0 deletions src/components/TextInput/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ import { tokens } from '../../theme/tokens';
const { bodyLarge, bodySmall } = tokens.md.sys.typescale;

export const styles = StyleSheet.create({
root: {
flexShrink: 1,
},
input: {
paddingVertical: 0,
paddingHorizontal: 0,
Expand Down
15 changes: 15 additions & 0 deletions src/components/__tests__/TextInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1340,3 +1340,18 @@ it('hides prefix/suffix when blurring after clear() was called while focused', a
expect(screen.queryByText('$')).not.toBeOnTheScreen();
expect(screen.queryByText('/100')).not.toBeOnTheScreen();
});

it('applies flexShrink: 1 to the outer container to prevent overflowing constrained flex parents', async () => {
const { root } = await render(
<View style={{ width: 100, flexDirection: 'row' }}>
<TextInput
label="Constrained Input"
value="This is an extremely long string that would typically force an unconstrained flex parent to expand beyond limits"
onChangeText={() => {}}
/>
</View>
);

const pressable = getOuterTextInputPressable(root);
expect(pressable).toHaveStyle({ flexShrink: 1 });
});
30 changes: 30 additions & 0 deletions src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
role="none"
style={
{
"flexShrink": 1,
}
}
>
<View
style={
Expand Down Expand Up @@ -506,6 +511,11 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
role="none"
style={
{
"flexShrink": 1,
}
}
>
<View
style={
Expand Down Expand Up @@ -980,6 +990,11 @@ exports[`renders filled TextInput with label and value 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
role="none"
style={
{
"flexShrink": 1,
}
}
>
<View
style={
Expand Down Expand Up @@ -1178,6 +1193,11 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
role="none"
style={
{
"flexShrink": 1,
}
}
>
<View
style={
Expand Down Expand Up @@ -1632,6 +1652,11 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
role="none"
style={
{
"flexShrink": 1,
}
}
>
<View
style={
Expand Down Expand Up @@ -2086,6 +2111,11 @@ exports[`renders outlined TextInput with label and value 1`] = `
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
role="none"
style={
{
"flexShrink": 1,
}
}
>
<View
style={
Expand Down
Loading