TextInput placeholder breaking style
メンテナーはふだん 3 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 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時間
- マージ済み PR（30日）
- 1
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- 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
-
area:desktop area:ui bug platform:macos
難易度 2/5 1〜3時間 初心者へのやさしさ 67/100
anthropics/claude-code#106183 ·
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1〜3時間 初心者へのやさしさ 76/100
メンテナーはふだん 1 日以内に返信
-
feature:App-Tour feature:Chat ready Web
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
digitalfabrik/integreat-app#4523 · リアクション 2 件 ·
メンテナーはふだん 3 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
Required Lexical field accepts two empty paragraphs対応中かも @lazerg が今日担当しました。 オープンBug
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
payloadcms/payload#19222 ·
メンテナーはふだん 1 日以内に返信