Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

TextInput placeholder breaking style

Ouverte
  • Quelque chose ne va pas ?
#456 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 3 jours

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
30/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Calme
Stack technique
react-native, typescript
Domaine
frontend, mobile

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

needs reproduction

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:
Image

on click:
Image

the content looks fine (it still does not respect the padding, but the text is readable), the placeholder shifts
Image

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>
  );
}
Langage dominant
TypeScript
Étoiles
166
Forks
45
Merge moyen
13 j 14 h
PR mergées (30 j)
1

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de nativewind/react-native-css

Toutes les issues de nativewind/react-native-css

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.