Fix #2: Focus jumps to genre after status change
All checks were successful
CI / quality-checks (push) Successful in 43s

No idea why this is happening, but I solved it by making htmx swap only
the user status containers instead of the whole page. This keeps the
toggle status intact and prevents the jump.
This commit is contained in:
2026-04-01 11:37:27 +02:00
parent 206b2a9d5b
commit 9429d203bd
2 changed files with 4 additions and 4 deletions

View File

@@ -23,7 +23,7 @@
{% import 'components/user_book_vars.html.j2' as vars with context %}
<div class="col-12 d-lg-none mb-3">
<input type="checkbox" id="status-toggle" class="status-toggle-checkbox" hidden>
<div class="user-status-card">
<div class="user-status-card" id="user-status-card">
<label for="status-toggle" class="status-bar">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center gap-2">
@@ -110,7 +110,7 @@
<div class="card-header">
<h6 class="mb-0">{{ session.get('viewing_as_user').title() }}'s Data</h6>
</div>
<div class="card-body">
<div class="card-body" id="user-status">
{% include 'components/reading_status.html.j2' %}
{% include 'components/wishlist_status.html.j2' %}
</div>

View File

@@ -6,7 +6,7 @@
<h6 class="text-muted mb-2">📖 Reading Status</h6>
<!-- Action Buttons -->
<div class="mb-3">
<div class="mb-3" hx-select-oob="#flash-messages-container,#user-status-card,#user-status" hx-swap="none show:none">
{% if vars.current_reading %}
<form action="/book/{{ book.id }}/reading/finish" method="POST" class="d-inline">
<button type="submit" class="btn btn-success btn-sm me-2">✓ Finish Reading</button>
@@ -29,7 +29,7 @@
<div class="alert alert-light border py-2 mb-3">
<form action="/book/{{ book.id }}/reading/{{ vars.completed_readings[0].id }}/update" method="POST"
class="row align-items-center g-2" hx-trigger="change,submit" hx-swap="none show:none"
hx-select-oob="#flash-messages-container:outerHTML" hx-target="this">
hx-select-oob="#flash-messages-container" hx-target="this">
<!-- Hidden fields to preserve other reading data -->
<input type="hidden" name="start_date" value="{{ vars.completed_readings[0].start_date.strftime('%Y-%m-%d') }}">
<input type="hidden" name="end_date"