Mutating state via onChange causes cursor jump to end of input

[danielstocks]

Bug report

Description / Observed Behavior

I'm attempting to use the following code as suggested by @sergiodxa to mutate state while typing in a text input.

The mouse cursor does not maintain its position within the text input field (if placed anywhere except at the end) while mutating the state.

Controlling an input only with React.useState works as intended.

Expected Behavior

Cursor should maintain it's current position within the text input.

Repro Steps / Code Example

import useSWR from "swr";

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function App() {
  const { data, mutate } = useSWR(
    "https://jsonplaceholder.typicode.com/todos/1",
    fetcher,
  );

  function handleChange(event) {
    mutate(
      {
        ...data,
        title: event.currentTarget.value
      },
      false
    );
  }

  if (!data) return <div>loading</div>;

  return (
    <div>
      <input value={data.title} onChange={handleChange} />
    </div>
  );
}

https://codesandbox.io/s/upbeat-thompson-qqeof?file=/src/App.js

Additional Context

SWR version: 0.4.2

This bug seems to have been introduced in version 0.3.9. I'm suspecting (without any scientific proof 🧑‍🔬) that it was introduced either by #777 or #735.

In version 0.3.8 and older it works as expected.

[koba04]

I've confirmed the behavior and it happens when we update a text value in onChange asynchronously.
It happens with useState, and the following is a minimum reproduction.
https://codesandbox.io/s/distracted-elion-htxt9?file=/src/App.js

As @danielstocks pointed out, this seems to be caused by #735 because it uses await 0 to dedupe synchronous mutation calls.
If SWR supports the case to call the mutate function synchronously in an input handler, we might have to re-consider the approach #735 introduces.