Improve label create picker interactions on touch devices

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: '',