[🐞] Odd render behavior

[tuurbo]

Which component is affected?

Qwik Runtime

Describe the bug

I'm building a form library (inspired by Angular) and have run into a few issues.

video: https://www.loom.com/share/58a37b30e1714635b4dd2fc6633cd1ef repo: https://github.com/tuurbo/qwik-form-test

In this example, first refresh the page (within blitzstack) and if you type into the field labeled "Option 0", you will see the hardcoded value "this_breaks!!" be replaced by the input fields value.

After you refresh the page (within blitzstack), if you type in the field labeled "Age" first and then into the field labeled "Option 0", it does not replace the hardcoded value.

I've been converting an ecommerce site to Qwik for months now and have seen this weird behavior before but I have finally found a way to consistently reproduce it.

Reproduction

https://stackblitz.com/edit/github-txqagw?file=src%2Fcomponents%2Fform%2Fform-helpers.tsx

Steps to reproduce

No response

System Info

stackblitz

-- or --

System:
    OS: Windows 10 10.0.19045
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900HK
    Memory: 13.29 GB / 31.68 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (109.0.1518.69)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @builder.io/qwik: 0.17.5 => 0.17.5
    @builder.io/qwik-city: 0.1.1 => 0.1.1
    undici: 5.18.0 => 5.18.0
    vite: 4.1.1 => 4.1.1

Additional Information

No response

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• github-txqagw (Open reproduction)

[manucorporat]

The repo is awesome, very details issue! Thanks!

I wonder if you could create a even simpler version, one with just the case that breaks, and nothing else. If you can narrow it down more, i will be able to jump sooner into fixing mode ;)

[tuurbo]

@manucorporat I trimmed the code down as much as I could and made a new video, hope that helps.

video: https://www.loom.com/share/47f96198cc5e49a6886b19e8fee90c3b

stackblitz: https://stackblitz.com/edit/github-mtkewj?file=src%2Froutes%2Findex.tsx,src%2Fcomponents%2Fform%2Fform-helpers.tsx

repo: https://github.com/tuurbo/qwik-form-test/tree/slim1

[tuurbo]

I changed the title because i just tested that the bug happens in preview mode also, not just dev

[manucorporat]

Managed to narrow it down to:

import { component$, $, useStore } from '@builder.io/qwik';

export default component$(() => {
  const store = useStore(
    {
      controls: {
        age: {
          value: 1,
          valid: true,
        },
      },
    },
    {
      deep: true,
    }
  );
  const group = {
    controls: store.controls,
  };

  return (
    <div>
      <button
        onClick$={async (e) => {
          group.controls.age.value++;
          const a = $(() => {
            console.log('stuuff');
          });
          await a();
          group.controls.age.valid = false;
        }}
      >
        Increment
      </button>
      <FormDebug ctrl={group.controls.age} />
      {group.controls.age.value == 2 && <div>match!</div>}
    </div>
  );
});

export const FormDebug = component$<{ class?: string; ctrl: any }>((props) => {
  return (
    <div>
      value:{' this_breaks!! '} -<>{props.ctrl.value} </>
      <>{props.ctrl.value + ''} </>
    </div>
  );
});