callstack / callstack/react-native-paper

TextInput in outline mode - browser autofill obscures outline

Ouverte
#4,404 1 commentaire 2 réactions 0 personnes assignées Voir sur GitHub
bug
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

### Current behaviour
When using the TextInput in outline mode in a react native web build, the browser autocomplete provides a background color to indicate that it was autocompleted. This background obscures the bottom and right border outlines. It also doesn't autofill the areas used in by any left or right props components, such as icons. This is not ideal, but acceptable. Obscuring the outline is a very unprofessional look.

### Expected behaviour
Primary expectation:
I expect the browser autofill background to be contained within the outline of the TextInput and not obscure it.
Secondary expectation:
I also expect it to completely fill the outline, not leaving a blank spot for the icons.

### How to reproduce?
}
/>

View in browser (Chrome on Windows or Android, Edge on Windows have been tested)

### Preview
![TextInput problem](https://github.com/callstack/react-native-paper/assets/22553362/a602d380-a1c1-4762-b913-79618ae83a88)

### What have you tried so far?
Lots of time on Google

### Your Environment

| software | version
| --------------------- | -------
| android | 12 (also tested on newer, but not sure of version)
| react-native | 0.74.1 (also 0.73.6)
| react-native-paper | ^5.12.3
| node | 20.9.0
| npm or yarn | 10.7.0
| expo sdk | ~51.0.2 (also ^50.0.1)
| windows | 24.0.6367.156
| edge | 124.0.2478.80
| chrome | 124.0.6367.156

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par l’implémentation web de TextInput et reproduisez l’input décrit avec l’autofill du navigateur activé, en utilisant comme référence l’exemple d’e-mail fourni et les versions du navigateur. La tâche est terminée lorsque l’arrière-plan de l’autofill reste à l’intérieur de l’outline et ne laisse pas de zone non couverte autour du composant d’icône.

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

Évaluation

Stack technique
react-native
Domaine
frontend, web-dev
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.