fix: Clear button with stop propagation and multiple open instances

Author: Jasenkoo

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -196,7 +196,6 @@
     });
     const slots = useSlots();
     const isOpen = ref(false);
-    const valueCleared = ref(false);
     const modelValue = toRef(props, 'modelValue');
 
     onMounted(() => {
@@ -314,15 +313,12 @@
 
     const openMenu = (): void => {
         if (!props.disabled && !props.readonly) {
-            if (!valueCleared.value) {
-                setMenuPosition();
-                isOpen.value = !isOpen.value;
+            setMenuPosition();
+            isOpen.value = !isOpen.value;
 
-                if (!isOpen.value) {
-                    clearInternalValues();
-                }
+            if (!isOpen.value) {
+                clearInternalValues();
             }
-            valueCleared.value = false;
             parseExternalModelValue(props.modelValue);
         }
     };
@@ -332,7 +328,6 @@
      * for the modelValue and clear internally stored data
      */
     const clearValue = (): void => {
-        valueCleared.value = true;
         inputValue.value = '';
         clearInternalValues();
         emit('update:modelValue', null);

src/Vue3DatePicker/components/DatepickerInput.vue

@@ -29,8 +29,14 @@
                 @keydown.tab="handleTab"
                 @focus="handleFocus"
             />
-            <span class="dp__input_icon" v-if="$slots['input-icon'] && !hideInputIcon"><slot name="input-icon" /></span>
-            <CalendarIcon v-if="!$slots['input-icon'] && !hideInputIcon" class="dp__input_icon dp__input_icons" />
+            <span class="dp__input_icon" v-if="$slots['input-icon'] && !hideInputIcon" @click="stopPropagation"
+                ><slot name="input-icon"
+            /></span>
+            <CalendarIcon
+                v-if="!$slots['input-icon'] && !hideInputIcon"
+                class="dp__input_icon dp__input_icons"
+                @click="stopPropagation"
+            />
             <span
                 class="dp__clear_icon"
                 v-if="$slots['clear-icon'] && clearable && !disabled && !readonly"
@@ -40,7 +46,7 @@
             <CancelIcon
                 v-if="clearable && !$slots['clear-icon'] && inputValue && !disabled && !readonly"
                 class="dp__clear_icon dp__input_icons"
-                @click.prevent="onClear"
+                @click.stop.prevent="onClear"
             />
         </div>
     </div>
@@ -124,15 +130,18 @@
         }
     };
 
-    const handleOpen = (e: Event) => {
-        e.stopImmediatePropagation();
+    const handleOpen = () => {
         if (props.textInput && props.textInputOptions?.openMenu && !props.isMenuOpen) {
             emit('open');
         } else if (!props.textInput) {
             emit('open');
         }
     };
 
+    const stopPropagation = (e: Event) => {
+        e.stopImmediatePropagation();
+    };
+
     const onClear = () => {
         emit('clear');
     };