[🐞] Modular Forms input loses focus when projected

[burabunja]

Which component is affected?

Qwik Runtime

Describe the bug

On first page load the input loses its focus when it is projected inside a component. It works when it isn't projected or when it is, only without a state showing in the template. View the reproduction.

Reproduction

https://stackblitz.com/edit/qwik-starter-huz7qg?file=src%2Froutes%2Findex.tsx

Steps to reproduce

Make sure to refresh page on every input try

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (2) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @builder.io/qwik: ^1.5.2 => 1.5.2 
    @builder.io/qwik-city: ^1.5.2 => 1.5.2 
    undici: 6.13.0 => 6.13.0 
    vite: ^5.2.9 => 5.2.9

Additional Information

No response

[thejackshelton]

Hey @burabunja! Looked through the issue, and indeed it does look like it occurs when the property read of dirty happens in the JSX. In particular, it looks like the issue stems from how Modular Forms handles focus when an input becomes "dirty"

https://github.com/fabian-hiller/modular-forms/blob/23f613f987a205735ebe35c57d2435ae4cc65a49/packages/qwik/src/utils/updateFormDirty.ts#L10

I don't see where exactly the focus method is called, however I do see that the dirty logic is touching the field store somewhere, which is doing the following:
https://github.com/fabian-hiller/modular-forms/blob/23f613f987a205735ebe35c57d2435ae4cc65a49/packages/react/src/methods/focus.ts#L17

If you could move this issue into modular forms, as I don't believe this is a problem with core, unless there is a reproduction of this happening without the dirty api from modular forms.