fix(collections): Close/Cancel removed the hidden confirm dialog, not the modal

closeCollectionModal picked document.querySelector(".fixed.inset-0") —
the FIRST overlay in DOM order, which is the sitewide #confirm-modal
that the header renders (hidden, display:none, but present). The real
create/edit modal stayed open: every Close and Cancel click on the
collection modals did nothing. Caught by the knob-matrix spec — the
pencil-glyph case clicked Close and the Edit modal persisted.

The buttons now pass $el and the overlay OWNING the button is closed
(closest(".fixed.inset-0")), falling back to #modal-container's child
for non-Alpine callers. Both the collection create/edit modal and the
restore-system modal take the argument.
This commit is contained in:
John O'Keefe committed 2026-10-31 15:40:21 -04:00
1 parent 21142cae5f
commit 79b47c9680
6 files changed
+20 -13

No files matched your search

+3 -3
View File
@@ -14,7 +14,7 @@ templ CollectionModal(collection CollectionData) {
<h2 class="text-xl font-bold" style="color: var(--text-primary)">Create Collection</h2>
}
</div>
<button type="button" @click="closeCollectionModal()" class="icon-btn" aria-label="Close">
<button type="button" @click="closeCollectionModal($el)" class="icon-btn" aria-label="Close">
@Icon("close", "h-5 w-5")
</button>
</div>
@@ -86,7 +86,7 @@ templ CollectionModal(collection CollectionData) {
</div>
</div>
<div class="flex justify-end space-x-3">
<button type="button" @click="closeCollectionModal()" class="btn btn-secondary">Cancel</button>
<button type="button" @click="closeCollectionModal($el)" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Update Collection</button>
</div>
</form>
@@ -186,7 +186,7 @@ templ CollectionModal(collection CollectionData) {
<input type="hidden" name="color" id="collection-color" value="blue"/>
</div>
<div class="flex justify-end space-x-3">
<button type="button" @click="closeCollectionModal()" class="btn btn-secondary">Cancel</button>
<button type="button" @click="closeCollectionModal($el)" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Create Collection</button>
</div>
</form>