TextInput placeholder breaking style
維護者通常 3 天內回覆
還沒有人認領這個 Issue。
評估
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 新手友好度
- 30/100
- Issue 類型
- 缺陷
- 描述清晰度
- 基本清楚
- 活躍度
- 冷清
- 技術堆疊
- react-native, typescript
研究方向
Start with the TextInput in the Input component, which receives className via cn(...) including placeholder-input and the android: variants, then reproduce the focus-time placeholder shift on a device or simulator. The issue does not say which platform or which class causes the shift, so narrow that first. Done means the placeholder stays inside the box on focus with padding respected, shown by a reproduction or a test in the react-native-css test suite.
由索引模型根據 Issue 內容生成。
描述
Hey guys, so I've been fighting with react-native-css's TextInput and I was able to resize the text input which I think was to big for the screen, and resize the content to fit in the box. However whenever I click on the text input, the placeholder shifts and gets cut, breaking the style and it does not go back, is there a way to fix the placeholder or resize the text input in a proper way?
First render:
on click:
the content looks fine (it still does not respect the padding, but the text is readable), the placeholder shifts
Here is the code of my component:
"use client";
import { useState } from "react";
import { cn } from "@mayom/ui/utils";
import { Icon, Lucide } from "../../icons";
import {
Pressable,
TextInput,
TextInputProps,
View,
} from "../../native-components";
type InputProps = TextInputProps & {
multiline?: boolean;
disabled?: boolean;
invalid?: boolean;
secret?: boolean;
icon?: React.ReactNode;
};
export function Input({
secret = false,
multiline = false,
disabled = false,
invalid = false,
icon,
className,
...props
}: InputProps) {
const [secure, setSecure] = useState<boolean>(secret);
return (
<View
className={cn(
"group flex flex-row items-center shrink relative",
className,
)}
>
{icon}
<TextInput
readOnly={disabled}
aria-disabled={disabled}
multiline={multiline}
selectTextOnFocus={!disabled}
secureTextEntry={secure}
editable={!disabled}
className={cn(
"flex grow border border-border focus:outline-none focus:ring focus:ring-primary placeholder-input rounded-lg min-w-0 bg-transparent px-3 py-2 transition-colors duration-200 text-foreground android:h-9 android:p-0 android:leading-3",
disabled && "opacity-50 cursor-not-allowed",
invalid &&
"border-destructive text-destructive placeholder-destructive/40 bg-destructive/10",
icon && "pl-10",
)}
{...props}
/>
{secret && (
<Pressable
className={cn(
"absolute right-2 top-0.8 flex items-center justify-center size-7 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 active:bg-accent/20 active:translate-y-px hover:bg-accent/50 transition-colors duration-200",
invalid && "focus-visible:ring-destructive/70",
)}
onPress={() => setSecure(!secure)}
>
{secure ? (
<Icon
icon={Lucide}
name="eye"
size={22}
className={cn("text-input", invalid && "text-destructive")}
/>
) : (
<Icon
icon={Lucide}
name="eye-closed"
size={22}
className={cn("text-input", invalid && "text-destructive")}
/>
)}
</Pressable>
)}
</View>
);
}
- 主要語言
- TypeScript
- 星號
- 166
- 分支
- 45
- 平均合併
- 13 天 14 小時
- 30 天內合併 PR
- 1
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 沒有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
nativewind/react-native-css 的其他 Issue
-
難度 2/5 1-3 小時 新手友好度 78/100
nativewind/react-native-css#545 ·
維護者通常 3 天內回覆
-
難度 2/5 1-3 小時 新手友好度 78/100
nativewind/react-native-css#544 ·
維護者通常 3 天內回覆
-
難度 2/5 1-3 小時 新手友好度 78/100
nativewind/react-native-css#543 ·
維護者通常 3 天內回覆
-
難度 2/5 1-3 小時 新手友好度 84/100
nativewind/react-native-css#540 ·
維護者通常 3 天內回覆
-
難度 2/5 1-3 小時 新手友好度 78/100
nativewind/react-native-css#538 ·
維護者通常 3 天內回覆
查看 nativewind/react-native-css 的全部 Issue
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 76/100
Graphify-Labs/graphify#4860 · 1 則留言 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 72/100
sveltejs/eslint-plugin-svelte#1615 ·
維護者通常 7 天內回覆
-
Parallel reticle_verify opens per-flow leases without the source lease's ignoreHTTPSErrors可能已有人在做 @as992949791 今天認領。 未關閉good first issue help wanted
難度 2/5 1-3 小時 新手友好度 85/100
reticlehq/reticle#2033 · 1 則留言 ·
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 68/100
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 78/100
維護者通常 1 天內回覆