TextInput without a label is invisible while it is empty and unfocused
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 82/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- react-native, typescript
- 领域
- frontend
调研方向
从 src/components/TextInput/hooks.ts 和 TextInput.tsx:401 开始，这里 animatedContainerStyle 被应用于原生输入框包装器。检查不透明度如何取决于是否存在标签，然后为一个空的、未聚焦且没有标签的 TextInput 添加或调整测试。完成标准是其占位符可见，同时带标签的输入框保持浮动标签行为。
由索引模型根据 Issue 内容生成。
描述
Current behaviour
A TextInput with no label is invisible while it is empty and unfocused: its input, its placeholder and any prefix or suffix have opacity 0, so only the outline shows until the field is focused. The wrapper around the native input takes the label float opacity (animatedContainerStyle in src/components/TextInput/hooks.ts, applied at TextInput.tsx:401) whether or not there is a label, and that value is 0 while the field is empty and unfocused. In 5.x the placeholder was visible.
Expected behaviour
A TextInput without a label shows its input and placeholder at full opacity at all times. Only a TextInput with a label hides the input while the label rests in its place.
How to reproduce?
const [query, setQuery] = React.useState('');
<TextInput
variant="outlined"
placeholder="Search for plugins..."
value={query}
onChangeText={setQuery}
/>
- Render it: only the outline shows, with no placeholder.
- In a test,
expect(screen.getByPlaceholderText('Search for plugins...')).toBeVisible()fails with "Received element is not visible".
What have you tried so far?
Applying animatedContainerStyle only when label is set keeps the floating label behaviour and shows the placeholder.
Your Environment
| software | version |
|---|---|
| react-native | 0.88.1 |
| react-native-paper | 6.0.0-alpha.1 and main at c8d8bab |
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.3k
- 平均合并
- 2 天 12 小时
- 30 天内合并 PR
- 22
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
callstack/react-native-paper 的其他 Issue
-
feature request
难度 2/5 1-3 小时 新手友好度 72/100
callstack/react-native-paper#5189 ·
维护者通常 1 天内回复
-
Accessibility example app good first task
难度 1/5 1-3 小时 新手友好度 86/100
callstack/react-native-paper#5182 ·
维护者通常 1 天内回复
-
Accessibility bug web
难度 2/5 1-3 小时 新手友好度 84/100
callstack/react-native-paper#5180 ·
维护者通常 1 天内回复
-
Chip: accessibilityState passed by caller is discarded; aria-checked is never forwarded to the real rendered node可能已有人在做 @bhumikabiyani 于 2 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 72/100
callstack/react-native-paper#5146 · 2 条评论 ·
维护者通常 1 天内回复
-
Tooltip: onPress event object is not propagated to parent component on native可能已有人在做 @aliyilmaztech 于 87 天前认领。 未关闭bug
难度 2/5 1-3 小时 新手友好度 74/100
callstack/react-native-paper#5003 ·
维护者通常 1 天内回复
查看 callstack/react-native-paper 的全部 Issue
相似的 Issue
-
bug
难度 2/5 1-3 小时 新手友好度 88/100
维护者通常 1 天内回复
-
pending close triaging
难度 2/5 1-3 小时 新手友好度 78/100
anomalyco/opencode#62582 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 68/100
live-codes/livecodes#1079 · 1 条评论 ·
维护者通常 1 天内回复
-
Add: ESP 2 RO未关闭approved check:passed streams:add
难度 2/5 1-3 小时 新手友好度 66/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 1 天内回复