When a TextInput is inside a Portal, cursor jumps around on edit

[togakangaroo]

Here is a code sandbox demonstrating the issue

Position your cursor at the first character of the TextInput and type a several times

Note that while the first appeared at the correct location, afterwards the cursor jumps to the end and you end up with something like afooaa. My guess is that the input is (incorrectly) re-mounting.

I'm using this very simple component

import React, { useState } from "react";
import { Portal, TextInput, Provider } from "react-native-paper";

export default () => {
  const [data, setData] = useState(`foo`);

  return (
    <Provider>
      <Portal>
        <TextInput value={data} onChangeText={setData} />
      </Portal>
    </Provider>
  );
};

When not inside of a Portal this works fine.

It also sometimes works fine even in a Portal, I have a team member that tried to fix this issue by modifying our code, and actually got it working from inside a Portal by introducing a ton of duplication and awkward state. I have not been able to narrow down what exactly makes it work again, but this reduced test case shows the incorrect behavior regardless.

[togakangaroo]

Using this terrible hack instead of TextInput is terrible but seems to work

type TextInputInAPortalProps = TextInputProps & {
  value: string
  onChangeText: (t: string) => void

}

// Use this whenever you need a TextInput inside that appears inside of a Portal
//
// Wait what now?
// This seems to fix this bug: https://github.com/callstack/react-native-paper/issues/1668
export const TextInputInAPortal = (props: TextInputInAPortalProps) => {
  const [value, setValue] = useState(props.value)

  useEffect(() => {
    if(value !== props.value)
      setValue(props.value)
  }, [props.value])

  const onChangeText = (text: string) => {
    setValue(text)
    props.onChangeText(text)
  }
  return React.createElement(TextInput, {...props, value, onChangeText})
}

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[rubengt01]

I am seeing this issue too.

[hermanho]

This issue also affect when input with CJK languages

[natedx]

This is still happening, I have a TextInput inside a Modal itself inside a Portal and I get buggy text edition

[zombie6888]

I guess, if you move Portal outside component, somewhere to parents, it will work. Try out my workaround from here: jeremybarbet/react-native-portalize#6 (comment)

[jslok]

Same issue here

[younes0]

maybe https://github.com/gorhom/react-native-portal could solve your problem ?

[mertcankose]

if you still have an problem with multiline prop use defaultValue={text} instead of value={text}

[eisodev]

if you still have an problem with multiline prop use defaultValue={text} instead of value={text}

This seems to stop the rerender loop when typing into a TextInput inside a Portal + Dialog. Which only happens with multiline={true). Thank you! <3

[adam-kuhn]

@mertcankose this saved me tons of headache. Do you happen to know why this is the cause?

[seba9999]

if you still have an problem with multiline prop use defaultValue={text} instead of value={text}

With this solution you can't control the text value anymore ... If you want to clear the input for example...