callstack / callstack/react-native-paper

TextInput in outline mode - browser autofill obscures outline

未关闭
#4,404 1 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

### 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

贡献指南

打开贡献指南

调研方向

从 TextInput 的 Web 实现开始,在启用浏览器 autofill 的情况下复现所概述的 input,并以提供的电子邮件示例和浏览器版本作为参考。完成的标准是 autofill 背景保持在 outline 内,并且不会在 icon 组件周围留下未覆盖的区域。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native
领域
frontend, web-dev
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。