TextInput value is ignored (web)

Current behaviour

When you for example filter the input state, the unfiltered input state is rendered.

Expected behaviour

The current value passed to the value prop is always rendered.

Code sample

const [value, setValue] = useState('');

// Renders react-native-paper instead of my-filtered-value when user types react-native-paper
const render = () => <TextInput value={value} onChangeText={(text) => setValue('my-filtered-value')} />

What have you tried

This seems to still work correctly in older versions (tested in 4.11.1).

Your Environment

software	version
ios or android	web
react-native	latest
react-native-paper	latest

[seahorsepip]

Ended up being a small change related to controlled and uncontrolled inputs. Previously the props value was synced with local state in a useLayoutEffect but this causes an additional render and can get out of sync in cases where input is filtered.

In my usecase there was a props value that didn’t change while the input entered by the end user did change, the useLayoutEffect won’t be called and the local state gets out of sync with the props value.

One example would be value={value} onChangeText{text => setValue(text.replace(/./g, 'b'))} and a user typing aaaaaaaaabbbaaaaabbaaa.

[lukewalczak]

Fixed by: https://github.com/callstack/react-native-paper/pull/3145