callstack / callstack/react-native-paper

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

Open
#4,779 2 comments 0 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
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

Contributor guide

Open the contributing guide

Research direction

Start at the TextInput implementation and compare the v4 and v5 behavior for Japanese IME composition text. Reproduce the issue with the example on iOS, then trace how the component renders composition text. Done means the unconfirmed composition text again has a visible underline in v5 without disrupting the existing TextInput underlines.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 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.