@@ -34,6 +34,7 @@ import { createYear, createYearRange, toDate } from 'reka-ui/date'
3434import { Select , SelectContent , SelectItem , SelectTrigger , SelectValue } from " @/components/ui/select" ;
3535import { Button } from " @/components/ui/button" ;
3636import { __ } from " @/utils/i18n" ;
37+ import { PopoverAnchor } from " reka-ui" ;
3738
3839const props = defineProps <FormFieldProps <FormDateFieldData >>();
3940const emit = defineEmits <FormFieldEmits <FormDateFieldData >>();
@@ -158,13 +159,20 @@ function onMinuteChange(minute: string) {
158159 );
159160 }
160161}
162+
163+ function onInputClick(e : MouseEvent ) {
164+ if (! isTouch .value ) {
165+ open .value = true ;
166+ e .preventDefault ();
167+ }
168+ }
161169 </script >
162170
163171<template >
164172 <Popover v-model:open =" open" :modal =" false" >
165173 <FormFieldLayout v-bind =" props" v-slot =" { id, ariaDescribedBy }" >
166174 <div class =" relative" >
167- <PopoverTrigger as-child >
175+ <PopoverAnchor as-child >
168176 <Input
169177 :id =" id"
170178 class =" pl-10 min-w-full appearance-none text-left [& ::-webkit-calendar-picker-indicator]:hidden [& ::-webkit-date-and-time-value]:text-left"
@@ -180,10 +188,10 @@ function onMinuteChange(minute: string) {
180188 :model-value =" inputValue"
181189 @update:model-value =" onDateInput"
182190 @touchstart.passive =" isTouch = true"
183- @click.prevent = " open = !isTouch "
191+ @click = " onInputClick "
184192 ref =" input"
185193 />
186- </PopoverTrigger >
194+ </PopoverAnchor >
187195 <div class =" absolute right-px rounded-md top-px w-10 bottom-px bg-background hidden not-[@supports_selector(::-webkit-calendar-picker-indicator)]:block"
188196 @touchstart.passive =" isTouch = true"
189197 @click =" ($refs.input.$el as HTMLInputElement).focus(); open = !isTouch"
0 commit comments