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 天內回覆