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

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.

[zombie6888]

I guess, if you move Portal outside component, somewhere to parents, it will work. Try out my workaround from here: https://github.com/jeremybarbet/react-native-portalize/issues/6#issuecomment-761907191

[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})
}