callstack / callstack/react-native-paper

TextInput in outline mode - browser autofill obscures outline

Đang mở
#4,404 1 bình luận 2 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu từ triển khai web của TextInput và tái hiện input được mô tả với autofill của trình duyệt được bật, sử dụng ví dụ email được cung cấp và các phiên bản trình duyệt làm tham chiếu. Công việc được xem là hoàn tất khi nền autofill nằm trong outline và không để lại vùng không được che phủ xung quanh thành phần icon.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native
Lĩnh vực
frontend, web-dev
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.