pageshow, bfcache, two-way binding of <input>

[iacore]

Making an <input> work with Solid is not easy. Especially when the browser sets the input fields from bfcache.

Here's the simplest code I can think of.

import { createEffect, createSignal } from "solid-js";

export default () => {
  const [filename, setfilename] = createSignal("")
  let el: HTMLInputElement
  createEffect(() => {
    return window.addEventListener("pageshow", () => setfilename(el.value))
  })

  return <main>
    <p>{filename()}
    </p>
    <input ref={el} value={filename()} oninput={($ => setfilename($.target.value))} />
  </main>
}

How to test

git clone https://codeberg.org/iacore/uyixfdghtwnswghuifd.git -b solid-demo
cd uyixfdghtwnswghuifd/
pnpm i
pnpm dev

A browser tab should now open.

1. Write something in the input field
2. Refresh the page

What is happening

el.value is set by the browser before pageshow event and after el is attached to the document.

I feel like this behavior is necessary when writing a long form for someone to fill out. bfcache should cache the page even after the browser is restarted in same case.

https://developer.mozilla.org/en-US/docs/Web/API/PageTransitionEvent

I have no idea about the interaction between page transition and Solid lifecycle.

No support from libraries

After searching through some code on https://www.solidjs.com/ecosystem?search=input#primitive, no one supports pageshow.

https://github.com/search?q=repo%3Apablo-abc%2Ffelte+pageshow&type=code
https://github.com/search?q=repo%3Afabian-hiller%2Fmodular-forms%20pageshow&type=code
https://github.com/search?q=repo%3Aniliadu%2Fsolid-js-form%20pageshow&type=code
https://github.com/search?q=repo%3Apureliani%2Fformix%20pageshow&type=code
https://github.com/search?q=repo%3Aniliadu%2Fsolid-js-form%20pageshow&type=code
https://github.com/search?q=repo%3Aodama626%2Fsolid-validation%20pageshow&type=code

What I want to see in Solid

The syntax to do this should be easy.

Some kind of proper two-way binding.

Be able to attach event handler to window, like in Svelte. This event should be delegated.