Cursor in TextInput jumps when using in Modal/Dialog

[atheck]

Current behaviour

I'm using a TextInput inside a Dialog. When entering text somewhere in the middle, the cursor jumps back before that newly entered character. When deleting a character, the cursor jumps before the previous character.

Expected behaviour

Code sample

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

return (
  <Portal>
    <Dialog visible={props.visible} dismissable={false}>
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Content>
        <TextInput value={value} onChangeText={setValue} />
     </Dialog.Content>
   </Dialog>
  </Portal>
);

Screenshots (if applicable)

What have you tried

Your Environment

software	version
ios or android	android
react-native	0.63.4
react-native-paper	4.7.2
node	14.15.4
npm	7.5.4

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• npm (found: 7.5.4, latest: 7.5.6)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[lukewalczak]

Hey @atheck, it looks like there is an issue related to controlled input by state within portal component. I can suggest you to move TextInput along with state to the separate component and then use it within portal component. Please check the snack and let me know if that helps.

[atheck]

Thank you for your reply @lukewalczak. Yes it works, but only as long as I don't want to change the value from outside. Looks like I need some workaround here...

[lukewalczak]

@atheck please also check the other thread related to the same issue.

[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.

[alexandreandriesse]

I still have this problem, and it's annoying !

[raajnadar]

Pass the state value to the defaultValue prop it will make the input uncontrolled and the issue will get solved

[Lancer521]

Pass the state value to the defaultValue prop it will make the input uncontrolled and the issue will get solved

I'm totally new to ReactNative and ran into this exact issue. defaultValue is the solution I was looking for, just didn't know where to look. Thanks @raajnadar

[DennyWanye]

defaultValue
Hi @raajnadar , I get a same issue, and could you please explain more about defaultValue? I'm not sure where to find defaultValue prop.