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

Offen
  • Stimmt etwas nicht?
#4,801 0 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 3 Tagen

Dieses Issue hat noch niemand übernommen.

Bewertung

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

Rechercherichtung

Beginne damit, getOutlinedOutlineInputColor in Helper.tsx im TextInput-Verzeichnis zu lesen, und vergleiche dann die deaktivierten Zweige für das dunkle und helle Theme mit der gemeldeten Erwartung. Erledigt ist die Aufgabe, wenn das Projekt ein festgelegtes, dokumentiertes Verhalten für die Umrandung im dunklen Theme und eine akzeptierte Möglichkeit zu ihrer Überprüfung oder Überschreibung hat.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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

Vorherrschende Sprache
TypeScript
Sterne
14.5k
Forks
2.3k
Ø Merge
8 T. 7 Std.
Gemergte PRs (30 T.)
5

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

Alle Issues in callstack/react-native-paper

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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