Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

TextInput placeholder breaking style

Aberta
  • Algo errado?
#456 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 3 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
30/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Pouca atividade
Stack de tecnologia
react-native, typescript
Domínio
frontend, mobile

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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>
  );
}
Linguagem predominante
TypeScript
Estrelas
166
Forks
45
Merge médio
13d 14h
PRs com merge (30d)
1

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de nativewind/react-native-css

Todas as issues de nativewind/react-native-css

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.