Cursor jumping on controlled input

Hi,

I’ve come across what might be a bug, but I wanted to see if anyone else has come across it. It seems like a generic React issue, but I can’t replicate on a “vanilla”-React set up and it only happens when using Frontity.

The bug is that when entering a value in a controlled input, the cursor jumps to the end of the input.

Here’s the minimal code in index.js:

import React from 'react';

const Theme = () => {
  const [email, setEmail] = React.useState("");

  return (
    <div>
      <p><input value={email} onChange={(e) => setEmail(e.target.value) }/></p>
    </div>
  );
};

export default Theme;

and here’s it working correctly, without frontity: https://codepen.io/stephenharris/pen/JjjpdMj

Is anyone else able to replicate this issue? Have I done something wrong?

Thank you for any help you can provide!

Hi, I’m not sure what can cause this, but maybe the React component is being re rendered or updated unnecessarily?

Is the code you posted exactly as you have it in your project? I mean that maybe you have the component wrapped in a connect function to pass the state? That could be interfering somehow.

If so, you might be able to replicate the behavior using the @frontity/connect package in your codepen and see if the bug appears.

Thanks @orballo

The connect thing was what came to my mind too, but removing it doesn’t resolve the bug.

I’ve created a codepen replicating this issue: https://codesandbox.io/s/github/stephenharris/frontity-poc/tree/withoutconnect/?fontsize=14 and the code is here: https://github.com/stephenharris/frontity-poc/tree/withoutconnect

I had wondered if it was do with my dev environment, but even deploying it on now shows this bug (https://node-nsva8oqay.now.sh/).

Has anyone else come across this?

I was able to reproduce the problem. It is a bug, for sure, and I have opened an issue to fix it.

Thanks for reportint it! :blush:

By the way, while we work on the issue, if you need it you could try to use Uncontrolled components to create your form, it seems to work this way.

The problem is in the code of react-easy-state, a library we forked to create our state manager. More info about this problem on this issue of the original repo.

I was waiting for the answer of the creator of that library about the best way to fix this, although I already proposed a solution.

I have updated our own issue with that info.

Still no news from the library developer. If you guys still need this, please say it here and I’ll add the fix to Frontity.