[Feature?]: Broaden out event replaying for commonly used input field pattern

[danieltroger]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

On the SSR'd page from solid-js there is a short JS snippet which writes all events into a global object. These are later replayed once the page has hydrated. The reason for doing this, I assume, is that user input given while the page is loading isn't lost.

However, it doesn't seem like that works correctly with a very commonly used input field pattern.

Examples 🌈

According to me this is a very common pattern to do when having an input field that's synced with a signal value.

It seems like that having value={name()} empties the input field before the input events are replayed as the page hydrates - or something else is happening, that leads to the user input to be cleared as the page loads.

My expected behavior is that text entered before the page is hydrated is retained and written to the signal.

function MyComponent() {
  const [name, setName] = createSignal("");

  return (
    <>
      <label for="name">Enter your name </label>
      <input
        id="name"
        placeholder="name"
        value={name()}
        onInput={(e) => setName(e.currentTarget.value)}
      />
      <br />
      <p>Signal value is {JSON.stringify(name())}</p>
    </>
  );
}

Motivation 🔦

Give great UX to my users

[danieltroger]

Current workaround example that works:

<input
  id={label_id}
  type="text"
  ref={element => {
    const { value } = element;
    if (value) {
      // user typed text on SSR'd page while JS was loading
      props.setConfig("general", "merchant", value);
    }
    createEffect(() => (element.value = props.config.general.merchant));
  }}
  onInput={e => props.setConfig("general", "merchant", e.currentTarget.value)}
/>

[ryansolid]

Interesting.. I think I've seen this but didn't click on me what was going on. This isn't a Start issue but a dom expressions issue. I will move it to Solid repo.