Recoil Input 游標位置被重置到末尾的問題

考察如下程式碼，頁面中有個輸入框，通過 Recoil Atom 來儲存輸入的值。

App.tsx

function NameInput() {
  const [name, setName] = useRecoilState(nameState);
  return (
    <>
      <input
        type="text"
        value={name}
        onChange={(event: React.FormEvent<HTMLInputElement>) => {
          setName(event.currentTarget.value);
        }}
      />
      <p>{name}</p>
    </>
  );
}

function App() {
  return (
    <div className="App">
      <NameInput />
    </div>
  );
}

實際執行效果是，輸入一定資訊後，將游標移動到其他位置再輸入，發現游標會被重置到已經輸入內容的最後。

Recoil 輸入框中游標位置被重置到了內容末尾

相關 issue 參見 Setter in selector forces the input cursor to jump to end of input field on change event #488

實踐中發現，該問題在 Recoil 搭配 React 16.8 才會有問題，而更新 React 後問題不復現，比如 16.9。

如果受限於平臺或其他不可抗力無法升級 React，臨時的解決辦法可以是通過 useState 設定一個本地狀態，在該狀態變更後同步到 Reacoil 的狀態上。

-  const [name, setName] = useRecoilState(nameState);
+  const setRecoilName = useSetRecoilState(nameState);
+  const [name, setName] = useState("");

+  useEffect(() => {
+    setRecoilName(name);
+  }, [name, setRecoilName]);

The text was updated successfully, but these errors were encountered: