Snapchat / Snapchat/Valdi_Widgets

CoreTextField escapes fixed-width parents on web

Open
#21 0 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.