From f98bed2e6964385f9dbc3794fb542125a76de343 Mon Sep 17 00:00:00 2001
From: Tigor Hutasuhut <tigor.hutasuhut@gmail.com>
Date: Mon, 13 May 2024 15:52:41 +0700
Subject: [PATCH] pagination: added cancel button to the dialog

---
 views/components/pagination.templ | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/views/components/pagination.templ b/views/components/pagination.templ
index bcaa95d..f5f5d6a 100644
--- a/views/components/pagination.templ
+++ b/views/components/pagination.templ
@@ -135,7 +135,9 @@ templ Pagination(c *views.Context, data PaginationData) {
 				}
 			</div>
 			<dialog
-				onclick="if (event.target === this) this.close()"
+				onclick="if (event.target === this && window.matchMedia('(max-width: 600px)').matches) {
+                    this.close()
+                }"
 				x-ref="dialog"
 				class="modal"
 			>
@@ -161,6 +163,7 @@ templ Pagination(c *views.Context, data PaginationData) {
 							hx-trigger="custom"
 							@keyup.enter="htmx.trigger($el, 'custom')"
 							:hx-vals="vals"
+							onfocus="this.select()"
 						/>
 						<button
 							hx-get={ c.Request.URL.Path }
@@ -174,6 +177,9 @@ templ Pagination(c *views.Context, data PaginationData) {
 							class="btn btn-primary join-item"
 						>Go</button>
 					</div>
+					<div class="mt-4 grid justify-center">
+						<button type="button" @click="$refs.dialog.close()" class="btn btn-secondary mx-auto">Cancel</button>
+					</div>
 				</div>
 			</dialog>
 		</div>