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

Ouverte
  • Quelque chose ne va pas ?
#4,801 0 commentaires 3 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é
3/5
Temps estimé
1-2 jours
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
react-native, typescript
Domaine
mobile

Piste de recherche

Commencez par lire getOutlinedOutlineInputColor dans Helper.tsx, au sein du répertoire TextInput, puis comparez les branches désactivées des thèmes sombre et clair avec le comportement attendu signalé. Le travail est terminé lorsque le projet dispose d’un comportement défini et documenté pour le contour du thème sombre, ainsi que d’une manière acceptée de le vérifier ou de le remplacer.

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

Description

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

Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.3k
Merge moyen
8 j 7 h
PR mergées (30 j)
5

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

Toutes les issues de callstack/react-native-paper

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.