Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[馃悶] Modular Forms input loses focus when projected #6129

Open
burabunja opened this issue Apr 17, 2024 · 2 comments
Open

[馃悶] Modular Forms input loses focus when projected #6129

burabunja opened this issue Apr 17, 2024 · 2 comments
Labels
STATUS-2: missing info Incomplete issue/pr template or missing important information TYPE: bug Something isn't working WAITING FOR: user Further information is requested from the issue / pr opener

Comments

@burabunja
Copy link

burabunja commented Apr 17, 2024

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

@burabunja burabunja added STATUS-1: needs triage New issue which needs to be triaged TYPE: bug Something isn't working labels Apr 17, 2024
@thejackshelton
Copy link
Member

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.

@PatrickJS PatrickJS changed the title Modular Forms input loses focus when projected [馃悶] [馃悶] Modular Forms input loses focus when projected May 7, 2024
@shairez shairez added WAITING FOR: user Further information is requested from the issue / pr opener STATUS-2: missing info Incomplete issue/pr template or missing important information and removed STATUS-1: needs triage New issue which needs to be triaged labels May 25, 2024
Copy link

Hello @burabunja. Please provide the missing information requested above. Issues marked with STATUS-2: missing info will be automatically closed if they have no activity within 14 days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
STATUS-2: missing info Incomplete issue/pr template or missing important information TYPE: bug Something isn't working WAITING FOR: user Further information is requested from the issue / pr opener
Projects
None yet
Development

No branches or pull requests

3 participants