Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

TextInput placeholder breaking style

Offen
  • Stimmt etwas nicht?
#456 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 3 Tagen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
30/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
react-native, typescript
Bereich
frontend, mobile

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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>
  );
}
Vorherrschende Sprache
TypeScript
Sterne
166
Forks
45
Ø Merge
13 T. 14 Std.
Gemergte PRs (30 T.)
1

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus nativewind/react-native-css

Alle Issues in nativewind/react-native-css

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.