pmndrs / valtio

🧙 Valtio makes proxy-state simple for React and Vanilla

Home Page:http://valtio.pmnd.rs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Input caret jumps to to the end when typing

timuric opened this issue · comments

For some reason react input always jumps to the end of the field.
Try to type something, then change caret to anywhere else and type further.
Is Valtio doesn't work with controlled components or am I missing something?

import React from "react";
import { proxy, useSnapshot } from "valtio";

// create a base proxy
const state = proxy({
  text: ""
});

export default function App() {
  const { text } = useSnapshot(state);
  return (
    <input
      value={text}
      onChange={(e) => {
        state.text = e.target.value;
      }}
    />
  );
}

Live demo:
https://codesandbox.io/s/valtio-input-bug-el7l7

In short: const { text } = useSnapshot(state, { sync: true });

Maybe we can add a better note in readme.