TextField causes infinite loading and freezes the vite server

[erlenddahl]

No idea how the TextField could cause this, but I have reproduced it with a minimal example.

This originally happened in a larger SvelteKit app, where I suddently found that the routes with forms in them failed to load. After debugging for a while, I found that replacing TextFields with normal inputs seemed to solve the issue.

To reproduce it, I created a new SvelteKit app with npx sv create, and checked tailwindcss to be included. Then I ran npm install svelte-ux. I then updated tailwind.config.js, but the one on "Getting started" is outdated after the breaking 0.90 changes, so I had to find something that worked from the git repo instead.

I then created two routes: one with a simple input element (just for comparison), and one with a simple TextField element.

The one with the input element (/input) works completely normal. You can load the page, enter text, refresh the page as many times as you want.

The one with the TextField (/textfield) works on first load, but if you refresh it, the page will never stop loading. If you now try to open a new tab, nothing will load (Vite is completely frozen).

I have tried:

• Different versions of node (v18.20.5 and v22.13.1.
• Different versions of vite (5.4.14 and 6.1.0).
• @sveltejs/adapter-auto and @sveltejs/adapter-node.
• Multiple different computers with different OSes (Windows and Ubuntu Server).
• Cleaning the npm cache
• Reinstalling all packages
• Running vite with --force, and running vite with debug logging enabled (no useful messages, everything seems normal until it is frozen).
• Different versions of tailwindcss (3.4.17 and 4.0.0)
• Different versions of svelte-ux (0.77.1, 0.90.0, 0.90.1).
• Different combinations of svelte-ux and tailwindcss versions
• With and without a layout.
• npm run dev, and npm run build + npm run preview (as well as npm run build + running on the production server) gives the exact same results.

Nothing seems to help me. Have I done something very stupid, or is this some obscure bug somewhere?

Here are two different variants of the minimal reproduction:
svelte-ux@0.77.1, tailwindcss@3.4.17.zip
svelte-ux@0.90.1, tailwindcss@4.0.6.zip

[techniq]

Hey @erlenddahl, it's not just you. I ran into this just last night and was very confused as well. I'm not sure what is causing it yet either. My initial hunch was maybe it is related to a recent reactivity regression with svelte (introduced in 5.19.5) that I witnessed in LayerStack, but it displayed as not updating state and not locking up the Vite server.

• Svelte 5.19.5+ reactivity regressions layerchart#384
• Reactivity regression with 5.19.5 with conditional function calls sveltejs/svelte#15229
• fix: when re-connecting unowned deriveds, remove their unowned flag sveltejs/svelte#15255

With that said, the docs were on 5.19.3 which is an earlier version than when I first noticed the issues with LayerChart (5.19.4 worked). I just updated to 5.20.0 and surprisingly the issue hasn't happened yet (I've navigated around and restarted the server a handful of time).

Which version of svelte are you on, and could you see if the problem goes away in 5.20.0?

[techniq]

Actually I spoke too soon. It just locked up :(

[techniq]

The last changes to TextField occurred a month ago:

• Migrating to @layerstack/* packages (which are basically just extracted from Svelte UX)
• Adding element binding (bind:this) for the underlying input and textfield

Then no changes since last October. Of the 2 changes, the binding inputs is the probably the most suspicious (it uses an object set to workaround). I've removed bind:this and running the docs to see if I can trigger a lockup again.

Btw, the bind:this was added in 0.77.1 along with bumping some dependencies, which is coincidentally the oldest version you tested. Could you see if 0.77.0 has the issue with your minimal reproductions?

[erlenddahl]

Phew, nice to have that confirmed.

I'll try with 0.77.0 at once.

[erlenddahl]

I was on Svelte 5.20.0, by the way. Sorry I didn't include this vital information earlier. Here's my complete package list now, with svelte-ux@0.77.0:

textfieldinfiniteloadingbug@0.0.1 C:\Code\TextFieldInfiniteLoadingBug
├── @sveltejs/adapter-auto@4.0.0
├── @sveltejs/kit@2.17.1
├── @sveltejs/vite-plugin-svelte@5.0.3
├── @tailwindcss/vite@4.0.6
├── svelte-ux@0.77.0
├── svelte@5.20.0
├── tailwindcss@3.4.17
└── vite@6.1.0

Looks like it works now, actually. So then the bind:this change is probably the main suspect?

Edit: five minutes later, and the minimal reproduction still runs after a lot of page refreshes. I also downgraded to 0.77.0 on my main project, and that seems to run properly as well.

[techniq]

Removed bind:this in both locations and let it run for a while and haven't seen the issue.

I suspect the issue is the <Input bind:inputEl={inputHolder.input}> which uses a workaround to fix the HTMLInputElement | HTMLTextAreaElement type on inputEl

export let inputEl: HTMLInputElement | HTMLTextAreaElement | null = null;

// this is a workaround because Input only accepts an HTMLInputElement, not a TextAreaElement
const inputHolder = {
  set input(value: HTMLInputElement | null) {
    inputEl = value;
  },
};

Now that I look at this, I think we can get rid of this workaround and just update the types on Input to allow HTMLTextAreaElement for now, as I have plans to move multiline support handling from TextField to Input anyways.

Creating a PR now.

[techniq]

@erlenddahl Just released 0.90.2 with the (hopeful) fix. When you get a chance, can you verify? I'll keep an eye on it locally as well.

[erlenddahl]

Looks good in both my main project and the minimal reproduction so far. Nice, thank you very much for the swift response!