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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Issue with focus being lost on input beta7->beta8 #710

Closed
MikeDepies opened this issue Feb 26, 2025 · 6 comments · Fixed by #711
Closed

Issue with focus being lost on input beta7->beta8 #710

MikeDepies opened this issue Feb 26, 2025 · 6 comments · Fixed by #711

Comments

@MikeDepies
Copy link

This snippet below exposes a behavior change to the way inputs and merge fragments interact. In version beta7 and below, the focus would stay on the text input when a fragment came in. However in beta8, now it appears to lose focus on merge fragment. This is true for when a signal is bound to the input.

Snippet:

<body class="bg-gray-100 h-screen" id="body" data-on-load="@get(`/overview/sse`, {})">
    <div class="container mx-auto p-4" id="testing">
<div data-signals__ifmissing="{'test' : 'test'}" data-on-signals-change-test__debounce.20ms="@get(`/overview/search`, {})" id="datastar58uydy"><input data-bind-test  id="datastar8m3obv"></div>
</div>
</body>

Backend:
The backend can just send a merge fragment for this html.

Maybe I'm missing something here, but I tried to boil the problem down to the simplest example.
@bencroker
Copy link
Collaborator

bencroker commented Feb 26, 2025 •
edited
Loading

Can you please test using this patched version?
https://github.com/starfederation/datastar/blob/e4d82a2b07b3f781ee941058c1b0a9b0cdb9a09c/bundles/datastar.js
https://raw.githubusercontent.com/starfederation/datastar/7c976c115e40af10cb267162a37dc2bf9fa2d70e/bundles/datastar.js

PR for reference: #711

@bencroker bencroker mentioned this issue Feb 26, 2025
Merged
@bencroker
Copy link
Collaborator

In my tests the input field value is erased on fragment merge. Can you please let me know what behaviour you observe?

@MikeDepies
Copy link
Author

I will test the patched version tonight and report back.

@MikeDepies
Copy link
Author

MikeDepies commented Feb 27, 2025 •
edited
Loading

I tested the linked file: https://raw.githubusercontent.com/starfederation/datastar/7c976c115e40af10cb267162a37dc2bf9fa2d70e/bundles/datastar.js

The text gets nuked and the focus lost. And the signals seem to be completely gone on merge fragment. My pre tag is showing the ctx.signals.JSON(). and on merge that is gone.

Page Load:

<div class="container mx-auto p-4 " id="testing"><input data-bind-test="" data-on-signals-change-test="@get(`/overview/search`, {})" id="datastarrm4gsb">
      <pre class="mt-24" data-text="ctx.signals.JSON()" id="datastar2e163v">{
  "test": "test"
}</pre>
    </div>

After Merge Fragments:

<div class="container mx-auto p-4" id="testing"><input data-bind-test="" data-on-signals-change-test="@get(`/overview/search`, {})" id="datastarrm4gsb">
<pre class="mt-24" data-text="ctx.signals.JSON()" id="datastar2e163v"></pre>
</div>

Edit:
I also tested the first link, and that one does not nuke the signals, but the focus is lost.

I think the example: https://data-star.dev/examples/active_search is a good test. I would expect if that works as intended, than its likely to address the behavior I am seeing.

@bencroker
Copy link
Collaborator

This should now be fixed in https://raw.githubusercontent.com/starfederation/datastar/79fa7e5f9f3be4604053f2009764992f45a8a12c/bundles/datastar.js

Can you please test and confirm?

@MikeDepies
Copy link
Author

I'm not at my home machine, but I rebuilt the example here and it seems like its now resolved. Thanks for tracking it down!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix merge fragments starfederation/datastar
2 participants
@MikeDepies @bencroker