callstack / callstack/react-native-paper

TextInput in outline mode - browser autofill obscures outline

Open
#4,404 1 comment 2 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

Research direction

Start at the TextInput web implementation and reproduce the outlined input with browser autofill enabled, using the provided email example and browser versions as a reference. Done means the autofill background stays within the outline and does not leave an uncovered area around the icon component.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.