callstack / callstack/react-native-paper
`TextInput`: Underline for Japanese IME composition text is missing in v5 (MD3)
- 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
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