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

Aperta
  • Qualcosa non va?
#4,801 0 commenti 3 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react-native, typescript
Ambito
mobile

Direzione di ricerca

Inizia leggendo getOutlinedOutlineInputColor in Helper.tsx all’interno della directory TextInput, quindi confronta i rami disabilitati dei temi scuro e chiaro con il comportamento previsto segnalato. Il lavoro è completato quando il progetto ha un comportamento deciso e documentato per il contorno del tema scuro e un modo accettato per verificarlo o sovrascriverlo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
14.5k
Fork
2.3k
Merge medio
3g 8h
PR unite (30g)
13

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di callstack/react-native-paper

Tutte le issue di callstack/react-native-paper

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.