From 1e7c8e03dfb04639831565c9382dec6a04cb03ed Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 21 Feb 2024 09:19:06 +0100
Subject: [PATCH 01/12] refs #6907 feat: fix_input_clearable_hover

---
 src/components/common/VnInput.vue             | 44 ++++++++++++-------
 src/pages/Customer/Card/CustomerBasicData.vue |  1 -
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 8a01e0bee..0f7ea4e93 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
@@ -26,7 +26,7 @@ const value = computed({
         emit('update:modelValue', value);
     },
 });
-
+const focus = ref(false);
 const styleAttrs = computed(() => {
     return $props.isOutlined
         ? {
@@ -43,20 +43,32 @@ const onEnterPress = () => {
 </script>
 
 <template>
-    <QInput
-        ref="vnInputRef"
-        v-model="value"
-        v-bind="{ ...$attrs, ...styleAttrs }"
-        type="text"
-        :class="{ required: $attrs.required }"
-        @keyup.enter="onEnterPress()"
+    <div
+        @mouseover="focus = true"
+        @mouseleave="focus = false"
         :rules="$attrs.required ? [requiredFieldRule] : null"
     >
-        <template v-if="$slots.prepend" #prepend>
-            <slot name="prepend" />
-        </template>
-        <template v-if="$slots.append" #append>
-            <slot name="append" />
-        </template>
-    </QInput>
+        <QInput
+            ref="vnInputRef"
+            v-model="value"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            type="text"
+            :class="{ required: $attrs.required }"
+            @keyup.enter="onEnterPress()"
+        >
+            <template v-if="$slots.prepend" #prepend>
+                <slot name="prepend" />
+            </template>
+
+            <template #append>
+                <slot name="append" v-if="$slots.append" />
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="focus && value"
+                    @click="value = null"
+                ></QIcon>
+            </template>
+        </QInput>
+    </div>
 </template>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 458d50082..cf0ceaf51 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -69,7 +69,6 @@ const filterOptions = {
                         v-model="data.socialName"
                         :label="t('customer.basicData.socialName')"
                         :rules="validate('client.socialName')"
-                        autofocus
                     />
                 </div>
                 <div class="col">

From f075041da3401f5f79e43832ed083f008cabada5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 21 Feb 2024 09:21:22 +0100
Subject: [PATCH 02/12] refs #6907 fix: revert autofocus property

---
 src/pages/Customer/Card/CustomerBasicData.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index cf0ceaf51..458d50082 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -69,6 +69,7 @@ const filterOptions = {
                         v-model="data.socialName"
                         :label="t('customer.basicData.socialName')"
                         :rules="validate('client.socialName')"
+                        autofocus
                     />
                 </div>
                 <div class="col">

From 926f3b6950e22a9f315ec9893569028e0858e55a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 26 Feb 2024 07:22:34 +0100
Subject: [PATCH 03/12] refs #6907 feat: add mouseEvent VnInputDate

---
 src/components/common/VnInputDate.vue | 47 +++++++++++++--------------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 8e0ef2890..ff1dfb2fb 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -16,6 +16,8 @@ const props = defineProps({
         default: false,
     },
 });
+const focus = ref(false);
+
 const emit = defineEmits(['update:modelValue']);
 const value = computed({
     get() {
@@ -50,33 +52,30 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
+function maxDate(date) {
+    const today = formatDate(new Date());
+    return date <= today;
+}
 </script>
 
 <template>
-    <QInput
-        class="vn-input-date"
-        rounded
-        readonly
-        :model-value="toDate(value)"
-        v-bind="{ ...$attrs, ...styleAttrs }"
-    >
-        <template #append>
-            <QIcon name="event" class="cursor-pointer">
-                <QPopupProxy
-                    v-model="isPopupOpen"
-                    cover
-                    transition-show="scale"
-                    transition-hide="scale"
-                    :no-parent-event="props.readonly"
-                >
-                    <QDate
-                        :model-value="formatDate(value)"
-                        @update:model-value="onDateUpdate"
-                    />
-                </QPopupProxy>
-            </QIcon>
-        </template>
-    </QInput>
+    <div @mouseover="focus = true" @mouseleave="focus = false">
+        <QInput
+            class="vn-input-date"
+            rounded
+            readonly
+            :model-value="toDate(value)"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+        >
+            <template #append>
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="focus && value"
+                    @click="onDateUpdate(null)"
+                ></QIcon>
+                <QIcon name="event" class="cursor-pointer">
+                    <QPopupProxy
 </template>
 
 <style lang="scss">

From 9e9ad577f406e67ead2799e3c8dab9f3a6d757c2 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 26 Feb 2024 07:23:04 +0100
Subject: [PATCH 04/12] refs #6907 feat: add mask and today button

---
 src/components/common/VnInputDate.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index ff1dfb2fb..d090a2809 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -52,10 +52,6 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
-function maxDate(date) {
-    const today = formatDate(new Date());
-    return date <= today;
-}
 </script>
 
 <template>
@@ -76,6 +72,23 @@ function maxDate(date) {
                 ></QIcon>
                 <QIcon name="event" class="cursor-pointer">
                     <QPopupProxy
+                        v-model="isPopupOpen"
+                        cover
+                        transition-show="scale"
+                        transition-hide="scale"
+                        :no-parent-event="props.readonly"
+                    >
+                        <QDate
+                            :today-btn="true"
+                            mask="YYYY-MM-DD"
+                            :model-value="value"
+                            @update:model-value="onDateUpdate"
+                        />
+                    </QPopupProxy>
+                </QIcon>
+            </template>
+        </QInput>
+    </div>
 </template>
 
 <style lang="scss">

From f596620cfc8ee47221797cb99b097dde91886029 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 26 Feb 2024 07:27:58 +0100
Subject: [PATCH 05/12] refs #6907 feat: add click event inside input

---
 src/components/common/VnInputDate.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index d090a2809..2f0863d0b 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -62,6 +62,7 @@ const styleAttrs = computed(() => {
             readonly
             :model-value="toDate(value)"
             v-bind="{ ...$attrs, ...styleAttrs }"
+            @click="isPopupOpen = true"
         >
             <template #append>
                 <QIcon

From 1f46f534ec23238afcc46ca3d920f032f4544df5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 26 Feb 2024 10:17:25 +0100
Subject: [PATCH 06/12] refs #6907 test: update VnSearchBar spec

---
 test/cypress/support/commands.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 6d627e631..4a30efca3 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -174,11 +174,11 @@ Cypress.Commands.add('closeLeftMenu', (element) => {
 
 Cypress.Commands.add('clearSearchbar', (element) => {
     if (element) cy.waitForElement(element);
-    cy.get('#searchbar > form > label > div:nth-child(1) input').clear();
+    cy.get('#searchbar > form > div:nth-child(1) > label > div:nth-child(1) input').clear();
 });
 
 Cypress.Commands.add('writeSearchbar', (value) => {
-    cy.get('#searchbar > form > label > div:nth-child(1) input').type(value);
+    cy.get('#searchbar > form > div:nth-child(1) > label > div:nth-child(1) input').type(value);
 });
 Cypress.Commands.add('validateContent', (selector, expectedValue) => {
     cy.get(selector).should('have.text', expectedValue);

From 5916cb29d4fddaa4ce0d3456c84143326ed60115 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 26 Feb 2024 12:00:57 +0100
Subject: [PATCH 07/12] refs #6722 test: improve

---
 src/components/common/VnInput.vue                             | 4 ++--
 test/cypress/integration/VnLocation.spec.js                   | 4 ++--
 test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js | 2 +-
 test/cypress/support/commands.js                              | 1 +
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 0f7ea4e93..c5dc869ec 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -60,8 +60,8 @@ const onEnterPress = () => {
                 <slot name="prepend" />
             </template>
 
-            <template #append>
-                <slot name="append" v-if="$slots.append" />
+            <template #append v-if="$slots.append">
+                <slot name="append" />
                 <QIcon
                     name="close"
                     size="xs"
diff --git a/test/cypress/integration/VnLocation.spec.js b/test/cypress/integration/VnLocation.spec.js
index 02b924e4d..ab58395f9 100644
--- a/test/cypress/integration/VnLocation.spec.js
+++ b/test/cypress/integration/VnLocation.spec.js
@@ -1,7 +1,7 @@
 const locationOptions ='[role="listbox"] > div.q-virtual-scroll__content > .q-item'
 describe('VnLocation', () => {
     describe('Create',()=>{
-        const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
+        const inputLocation = '.q-form .q-card> :nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
         beforeEach(() => {
             cy.viewport(1280, 720);
             cy.login('developer');
@@ -26,7 +26,7 @@ describe('VnLocation', () => {
             cy.get(inputLocation).type('ecuador');
             cy.get(locationOptions).should('have.length',1);
             cy.get(`${locationOptions}:nth-child(1)`).click();
-            cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click();
+            cy.get(inputLocation+'> :nth-child(2) > .q-icon').click();
 
         });
     });
diff --git a/test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js b/test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js
index 20f137aeb..fc989d6c5 100644
--- a/test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInBasicData.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 describe('InvoiceInBasicData', () => {
-    const selects = ':nth-child(1) > :nth-child(1) > .q-field';
+    const selects = '.q-form .q-card>:nth-child(1) > :nth-child(1) > .q-field';
     const appendBtns = 'label button';
     const dialogAppendBtns = '.q-dialog label button';
     const dialogInputs = '.q-dialog input';
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index 4a30efca3..efb400caf 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -64,6 +64,7 @@ Cypress.Commands.add('getValue', (selector) => {
 
 // Fill Inputs
 Cypress.Commands.add('selectOption', (selector, option) => {
+    cy.waitForElement(selector);
     cy.get(selector).find('.q-select__dropdown-icon').click();
     cy.get('.q-menu .q-item').contains(option).click();
 });

From 88cf5160f8195f88edb4c389d50549788c3d316f Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 27 Feb 2024 11:31:46 +0100
Subject: [PATCH 08/12] refs #6907 test: update ClaimDevelopment spec

---
 src/components/common/VnInput.vue                       | 6 +++---
 test/cypress/integration/claim/claimDevelopment.spec.js | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index c5dc869ec..06654081a 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -52,7 +52,7 @@ const onEnterPress = () => {
             ref="vnInputRef"
             v-model="value"
             v-bind="{ ...$attrs, ...styleAttrs }"
-            type="text"
+            :type="$attrs.type"
             :class="{ required: $attrs.required }"
             @keyup.enter="onEnterPress()"
         >
@@ -60,8 +60,8 @@ const onEnterPress = () => {
                 <slot name="prepend" />
             </template>
 
-            <template #append v-if="$slots.append">
-                <slot name="append" />
+            <template #append>
+                <slot name="append" v-if="$slots.append" />
                 <QIcon
                     name="close"
                     size="xs"
diff --git a/test/cypress/integration/claim/claimDevelopment.spec.js b/test/cypress/integration/claim/claimDevelopment.spec.js
index 88ccbfab8..a8c16d9ac 100755
--- a/test/cypress/integration/claim/claimDevelopment.spec.js
+++ b/test/cypress/integration/claim/claimDevelopment.spec.js
@@ -8,6 +8,7 @@ describe('ClaimDevelopment', () => {
         cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit(`/#/claim/${claimId}/development`);
+        cy.waitForElement('tbody');
     });
 
     it('should reset line', () => {

From e0e5082e1e41be8578214f88d03f36a1bd892f22 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 15 Mar 2024 06:16:37 +0100
Subject: [PATCH 09/12] refs #6321 perf: replace QIcon with clearable prop

---
 src/components/common/VnInput.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 06654081a..31845828c 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -55,6 +55,7 @@ const onEnterPress = () => {
             :type="$attrs.type"
             :class="{ required: $attrs.required }"
             @keyup.enter="onEnterPress()"
+            :clearable="focus"
         >
             <template v-if="$slots.prepend" #prepend>
                 <slot name="prepend" />
@@ -62,12 +63,6 @@ const onEnterPress = () => {
 
             <template #append>
                 <slot name="append" v-if="$slots.append" />
-                <QIcon
-                    name="close"
-                    size="xs"
-                    v-if="focus && value"
-                    @click="value = null"
-                ></QIcon>
             </template>
         </QInput>
     </div>

From f5d6c45339290824d48a8a8a93cb0a9987a8957d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 21 Mar 2024 10:45:30 +0100
Subject: [PATCH 10/12] refs #6907 updates

---
 src/components/common/VnInput.vue     | 12 +++++++++---
 src/components/common/VnInputDate.vue |  2 +-
 src/components/common/VnInputTime.vue | 24 +++++++++++++++---------
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index e2d5641da..4c2aef065 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -41,8 +41,8 @@ const onEnterPress = () => {
     emit('keyup.enter');
 };
 
-const focus = () => {
-    vnInputRef.value.focus();
+const handleValue = (val = null) => {
+    value.value = val;
 };
 
 defineExpose({
@@ -63,7 +63,7 @@ defineExpose({
             :type="$attrs.type"
             :class="{ required: $attrs.required }"
             @keyup.enter="onEnterPress()"
-            :clearable="focus"
+            :clearable="false"
         >
             <template v-if="$slots.prepend" #prepend>
                 <slot name="prepend" />
@@ -71,6 +71,12 @@ defineExpose({
 
             <template #append>
                 <slot name="append" v-if="$slots.append" />
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="focus && value"
+                    @click="handleValue(null)"
+                ></QIcon>
             </template>
         </QInput>
     </div>
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index c45024380..7a41ae784 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -46,7 +46,7 @@ const isPopupOpen = ref(false);
 
 const onDateUpdate = (date) => {
     value.value = date;
-    isPopupOpen.value = false;
+    // isPopupOpen.value = false;
 };
 
 const padDate = (value) => value.toString().padStart(2, '0');
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index aefee1a4d..689ef0af0 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
-import VnInput from "components/common/VnInput.vue";
+import VnInput from 'components/common/VnInput.vue';
 
 const props = defineProps({
     modelValue: {
@@ -20,6 +20,8 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
+const focus = ref(false);
+
 const value = computed({
     get() {
         return props.modelValue;
@@ -27,12 +29,7 @@ const value = computed({
     set(value) {
         const [hours, minutes] = value.split(':');
         const date = new Date(props.modelValue);
-        date.setHours(
-            Number.parseInt(hours) || 0,
-            Number.parseInt(minutes) || 0,
-            0,
-            0
-        );
+        date.setHours(Number.parseInt(hours) || 0, Number.parseInt(minutes) || 0, 0, 0);
         emit('update:modelValue', value ? date.toISOString() : null);
     },
 });
@@ -71,14 +68,22 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <VnInput
+    <!-- <div @mouseover="focus = true" @mouseleave="focus = false"> -->
+    <QInput
         class="vn-input-time"
         readonly
         :model-value="formatTime(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
         @click="isPopupOpen = true"
+        :clearable="false"
     >
         <template #append>
+            <!-- <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="focus && value"
+                    @click="value = null"
+                ></QIcon> -->
             <QIcon name="event" class="cursor-pointer">
                 <QPopupProxy
                     v-model="isPopupOpen"
@@ -111,7 +116,8 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </VnInput>
+    </QInput>
+    <!-- </div> -->
 </template>
 
 <style lang="scss">

From 18d4be0ea22de832ed86df7aa67b87b0ba91bcfb Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 21 Mar 2024 12:33:28 +0100
Subject: [PATCH 11/12] refs #6907 feat: merge changes

---
 src/components/common/VnInput.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 4c2aef065..96028862a 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -26,7 +26,7 @@ const value = computed({
         emit('update:modelValue', value);
     },
 });
-const focus = ref(false);
+const hover = ref(false);
 const styleAttrs = computed(() => {
     return $props.isOutlined
         ? {
@@ -45,6 +45,10 @@ const handleValue = (val = null) => {
     value.value = val;
 };
 
+const focus = () => {
+    vnInputRef.value.focus();
+};
+
 defineExpose({
     focus,
 });
@@ -52,8 +56,8 @@ defineExpose({
 
 <template>
     <div
-        @mouseover="focus = true"
-        @mouseleave="focus = false"
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
         :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <QInput
@@ -74,7 +78,7 @@ defineExpose({
                 <QIcon
                     name="close"
                     size="xs"
-                    v-if="focus && value"
+                    v-if="hover && value"
                     @click="handleValue(null)"
                 ></QIcon>
             </template>

From fedec76b6247ea32aafa2f854675844365e944b3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 21 Mar 2024 13:11:22 +0100
Subject: [PATCH 12/12] refs #6907 feat: merge changes

---
 src/components/common/VnInputDate.vue | 11 +++++------
 src/components/common/VnInputTime.vue | 13 +------------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 7a41ae784..2053eceb1 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { computed, ref } from 'vue';
-import VnInput from 'components/common/VnInput.vue';
 import isValidDate from 'filters/isValidDate';
 
 const props = defineProps({
@@ -17,7 +16,7 @@ const props = defineProps({
         default: false,
     },
 });
-const focus = ref(false);
+const hover = ref(false);
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -46,7 +45,7 @@ const isPopupOpen = ref(false);
 
 const onDateUpdate = (date) => {
     value.value = date;
-    // isPopupOpen.value = false;
+    isPopupOpen.value = false;
 };
 
 const padDate = (value) => value.toString().padStart(2, '0');
@@ -79,19 +78,19 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <div @mouseover="focus = true" @mouseleave="focus = false">
+    <div @mouseover="hover = true" @mouseleave="hover = false">
         <QInput
             class="vn-input-date"
-            rounded
             readonly
             :model-value="displayDate(value)"
             v-bind="{ ...$attrs, ...styleAttrs }"
+            @click="isPopupOpen = true"
         >
             <template #append>
                 <QIcon
                     name="close"
                     size="xs"
-                    v-if="focus && value"
+                    v-if="hover && value"
                     @click="onDateUpdate(null)"
                 ></QIcon>
                 <QIcon name="event" class="cursor-pointer">
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 689ef0af0..4bd75eeaf 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -2,7 +2,6 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
-import VnInput from 'components/common/VnInput.vue';
 
 const props = defineProps({
     modelValue: {
@@ -20,7 +19,6 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
-const focus = ref(false);
 
 const value = computed({
     get() {
@@ -68,23 +66,15 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <!-- <div @mouseover="focus = true" @mouseleave="focus = false"> -->
     <QInput
         class="vn-input-time"
         readonly
         :model-value="formatTime(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
         @click="isPopupOpen = true"
-        :clearable="false"
     >
         <template #append>
-            <!-- <QIcon
-                    name="close"
-                    size="xs"
-                    v-if="focus && value"
-                    @click="value = null"
-                ></QIcon> -->
-            <QIcon name="event" class="cursor-pointer">
+            <QIcon name="schedule" class="cursor-pointer">
                 <QPopupProxy
                     v-model="isPopupOpen"
                     cover
@@ -117,7 +107,6 @@ const styleAttrs = computed(() => {
             </QIcon>
         </template>
     </QInput>
-    <!-- </div> -->
 </template>
 
 <style lang="scss">