Snapchat / Snapchat/Valdi_Widgets
CoreTextField escapes fixed-width parents on web
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 45
- Forks
- 7
- Avg merge
- 23h 26m
- Merged PRs (30d)
- 1
Description
Summary
CoreTextField can render its underlying web input wider than a fixed-width parent. This creates hidden horizontal page overflow even when the parent visually clips the field.
Reduced example
const compactField = new Style<View>({
width: 96,
flexShrink: 0,
});
<view style={compactField}>
<CoreTextField text="12" onChange={onChange} />
</view>
In an external Valdi web consumer, the 96px wrapper produced an underlying valdi-input about 228px wide. A second 72px one-character wrapper produced a roughly 166px input. At a 320px viewport, those intrinsic widths widened the page outside its intended single-column layout.
Cause observed in the current implementation
- CoreTextFieldViewModel exposes text-input attributes but not a container style or common width attributes.
- The CoreTextField root view has no caller-controlled width.
- Its TextFieldWrapper receives flexGrow={1}, but no explicit minWidth/maxWidth that lets it shrink with a narrow parent.
Compatibility impact
Compact numeric fields, codes, and table cells cannot reliably use CoreTextField without either accepting its intrinsic width, visually clipping an over-wide native input, or replacing it with a directly sized textfield. The last option works on web and Android but gives up the shared widget abstraction.
Proposed fix
Allow callers to size the CoreTextField container (for example through a containerStyle property or forwarded common layout attributes), and make the inner field shrink below its web intrinsic width when its parent is constrained. A regression should render CoreTextField inside a 96px parent and assert that both the component root and underlying web input remain within 96px.
This report is anonymized from an external Bzlmod consumer and contains no application-specific source or data.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating CoreTextFieldViewModel, the CoreTextField root view, and TextFieldWrapper, then reproduce the 96px-parent case described in the issue. Done means callers can constrain the component and both the root and underlying web input remain within the parent width in a regression test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100