callstack / callstack/react-native-paper

`TextInput`: Underline for Japanese IME composition text is missing in v5 (MD3)

Đang mở
#4,779 2 bình luận 0 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
After upgrading react-native-paper from v4 to v5, the underline for Japanese IME (Input Method Editor) composition text has disappeared from the TextInput component. This underline is a standard UI element that indicates the text is in an unconfirmed state, and its absence is a regression in usability for users typing in Japanese.

### Expected behaviour
As was the case in v4, an underline should appear beneath the text that is being composed and is not yet confirmed by the user. This provides a crucial visual cue to distinguish between unconfirmed and confirmed text.

### How to reproduce?
Here is a simple code snippet to reproduce the issue:
```
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { PaperProvider, TextInput, MD3LightTheme } from 'react-native-paper';

export default function App() {
const [text, setText] = React.useState('');

return (





);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
```

### What have you tried so far?
I have attempted several methods to resolve this issue, but none have been successful so far:

1. Customizing the MD3 Theme:
* I tried overriding various color properties within the MD3LightTheme object, including primary, onSurface, onSurfaceVariant, surface, and surfaceVariant.
* Changing these colors affected other parts of the TextInput (like the border and label), but none of them restored the underline for the IME composition text.

2. Attempting to Revert to MD2 Behavior:
* I configured the theme to use Material Design 2 by setting version: 2 and using MD2LightTheme as the base.

3. Applying Direct Props to `TextInput`:
* I experimented with props like underlineColor and activeUnderlineColor on the TextInput component itself. This only affects the main, persistent underline of the
flat mode input, not the temporary composition underline.

It seems the control over the IME composition underline style is not exposed through the current theme properties or component props in v5.

### Your Environment

| software | version
| --------------------- | -------
| ios | 18.5
| react-native | 0.79.5
| react-native-paper | 5.14.5
| node | 18.20.8
| npm or yarn | 10.8.2
| expo sdk | 53.0.20

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ừ phần triển khai TextInput và so sánh hành vi của v4 và v5 đối với văn bản đang composition của IME tiếng Nhật. Tái hiện vấn đề bằng ví dụ trên iOS, sau đó theo dõi cách component render văn bản đang composition. Hoàn tất khi văn bản đang composition chưa được xác nhận lại có gạch chân hiển thị trong v5 mà không làm ảnh hưởng đến các gạch chân TextInput hiện có.

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, typescript
Lĩnh vực
frontend, mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 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.