[solid] Refetching query inside <Suspense> resets focus

[KamehamehaNudel]

Describe the bug

Using a query created with createQuery insided a SolidJs componenet causes inputs to lose focus whenever the query refetches.

Your minimal, reproducible example

https://stackblitz.com/edit/solid-vite-dlveck?file=src/index.tsx

Steps to reproduce

1. Go to https://stackblitz.com/edit/solid-vite-dlveck?file=src/index.tsx
2. Focus the first input beneath "tanstack query with suspense"
3. The input will loose focus whenever the query updates/refetches
4. (Updates are happening in 2 second intervall by the signal used as the query key updating from the setInterval)

Expected behavior

As a user i expected the focus to remain on the input element.
That behaviour can also be seen in the example below it "Tanstack query without suspense"

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: windows 11
• Browser: firerfox 110.0

TanStack Query version

v4.24.4

TypeScript version

No response

Additional context

I added an additional example "vanilla resource with suspense" with just the solidjs native "createResource" and suspense. I understand it is not 100% applicable to expect tanstack query to behave the same but i figured it might serve as indication that the issue is not a general bug with solid's suspense component.

[mattbdc]

Seeing the same thing with Solid 1.7 and TanStack Query 4.27.0 , did you find a workaround?

[leaysgur]

And this seems to happen even if suspense: true is not set. (v4.29.7)

[leaysgur]

This is my minimal repro.

import { Suspense, render } from "solid-js/web";
import { QueryClientProvider, QueryClient, createQuery } from "@tanstack/solid-query";

const client = new QueryClient();

const ReproApp = () => {
  const reproQuery = createQuery({
    queryKey: () => ["repro"],
    queryFn: () => Promise.resolve(Date.now()),
    suspense: false, // 😿 
  });

  return (
    <>
      <p>Read data to track: {reproQuery.data}</p>
      <button onClick={() => reproQuery.refetch()}>refetch</button>
      <button onClick={() => client.invalidateQueries(["repro"])}>invalidate</button>

      <dialog open>Should animate once but...👻</dialog>
    </>
  );
};

const $style = document.createElement("style");
$style.textContent = `
@keyframes slideIn {
  from { translate: 0 -200%; }
  to   { translate: 0 0%; }
}
dialog {
  animation: slideIn 1s 1;
}
`;
document.head.append($style);

render(
  () => (
    <QueryClientProvider client={client}>
      <Suspense fallback={"..."}>
        <ReproApp />
      </Suspense>
    </QueryClientProvider>
  ),
  document.getElementById("root") ?? document.body
);

It seems suspense: false has no effect and always re-render.
As a result, the focus is lost and the animation is re-run.

Only work-around for me was not to use Suspense...

[ardeora]

Apologies for the late reply! This issue has been fixed in Solid Query v5 https://stackblitz.com/edit/solid-vite-pdmzdr?file=package.json,src%2Findex.tsx The example works here!

[leaysgur]

That's good to hear! Thank you~ 😃