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: