Why does TextInput disabled outline return transparent in Dark theme (getOutlinedOutlineInputColor) ?

Aberta
  • Algo errado?
#4,801 0 comentários 3 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 3 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
45/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
react-native, typescript
Domínio
mobile

Direção de pesquisa

Comece lendo getOutlinedOutlineInputColor em Helper.tsx dentro do diretório TextInput e, em seguida, compare os branches desabilitados dos temas escuro e claro com o comportamento esperado relatado. Considera-se concluído quando o projeto tiver um comportamento definido e documentado para o contorno do tema escuro e uma forma aceita de verificá-lo ou substituí-lo.

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

Descrição

question
Ask your Question

While using TextInput (mode="outlined") in React Native Paper with a custom dark theme, I noticed that disabled inputs don’t render an outline border.

After checking the source code, the reason seems to come from getOutlinedOutlineInputColor in Helper.tsx inside the TextInput directory :

const getOutlinedOutlineInputColor = ({
  theme,
  disabled,
  customOutlineColor,
}: BaseProps & { customOutlineColor?: string }) => {
  const isTransparent = color(customOutlineColor).alpha() === 0;

  if (!disabled && customOutlineColor) {
    return customOutlineColor;
  }

  if (theme.isV3) {
    if (disabled) {
      if (theme.dark) {
        return 'transparent';
      }
      return theme.colors.surfaceDisabled;
    }

    return theme.colors.outline;
  }

  if (disabled) {
    if (isTransparent) {
      return customOutlineColor;
    }
    return theme.colors.disabled;
  }
  return theme.colors.placeholder;
};

My Expectation
In dark mode, I would expect the disabled border to use something like theme.colors.surfaceDisabled (similar to light mode), instead of transparent.
This way, the outline remains visible and consistent with Material guidelines.

Question
Is the transparent return for dark mode intentional?
If yes, what’s the recommended way to override it so that disabled inputs still have a visible outline in dark theme?
Would you accept a PR that aligns the behavior with light mode (surfaceDisabled)?

Environment
react-native-paper: 5.14.5
react-native: 0.79.5
Platform: Android & iOS

Linguagem predominante
TypeScript
Estrelas
14.5k
Forks
2.3k
Merge médio
8d 7h
PRs com merge (30d)
5

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 callstack/react-native-paper

Todas as issues de callstack/react-native-paper

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.