From a2819f88d2f6d55e131d7d52b16244a100d2b475 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bla=C5=BE=20Bregar?= <blaz@aklaro.si>
Date: Mon, 6 Apr 2026 21:41:10 +0200
Subject: [PATCH] Improve label create picker interactions on touch devices

---
 src/features/labels/label-create-page.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/features/labels/label-create-page.js b/src/features/labels/label-create-page.js
index 76462a3..ab1190c 100644
--- a/src/features/labels/label-create-page.js
+++ b/src/features/labels/label-create-page.js
@@ -258,6 +258,8 @@ export function renderLabelCreatePage() {
                                 <button
                                   class="list-group-item list-group-item-action"
                                   type="button"
+                                  @mousedown.prevent
+                                  @touchstart.prevent="pickLocation(location)"
                                   @click="pickLocation(location)"
                                   :style="locationItemStyle(location)"
                                 >
@@ -313,6 +315,8 @@ export function renderLabelCreatePage() {
                             type="text"
                             inputmode="numeric"
                             x-model="form.expireDays"
+                            @focus="expireDaysFieldFocused = true"
+                            @blur="expireDaysFieldFocused = false"
                             @input="onExpireDaysInput()"
                             @click="openExpireDaysPicker()"
                             @keydown.escape="expireDaysPickerOpen = false"
@@ -355,7 +359,7 @@ export function renderLabelCreatePage() {
                         />
                       </div>
                     </div>
-                    <template x-if="isCompactExpireDaysLayout()">
+                    <template x-if="isCompactExpireDaysLayout() && expireDaysFieldFocused">
                       <div class="expiration-days-inline mt-2">
                         <div class="small text-body-secondary mb-2">Quick picks</div>
                         <div class="expiration-days-grid expiration-days-grid-inline">
@@ -527,6 +531,7 @@ export function labelCreatePageData(store) {
     locationPickerOpen: false,
     quantityUnitPickerOpen: false,
     expireDaysPickerOpen: false,
+    expireDaysFieldFocused: false,
     previewUrl: '',
     successMessage: '',
     submitError: '',