From 2040e2a4990f98bd7e68cc0741d4b49f4a875b17 Mon Sep 17 00:00:00 2001
From: Razvan Stoenescu <razvan.stoenescu@gmail.com>
Date: Wed, 8 May 2024 12:35:42 +0300
Subject: [PATCH] fix(QInput): lazy model + clearable - not emitting "change"
 event on clear btn

---
 ui/src/components/input/QInput.js                 | 2 +-
 ui/src/composables/private.use-field/use-field.js | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/input/QInput.js b/ui/src/components/input/QInput.js
index a2f677fb4df..489129dff74 100644
--- a/ui/src/components/input/QInput.js
+++ b/ui/src/components/input/QInput.js
@@ -71,7 +71,7 @@ export default createComponent({
 
     const onComposition = useKeyComposition(onInput)
 
-    const state = useFieldState()
+    const state = useFieldState({ hasChangeEvent: true })
 
     const isTextarea = computed(() =>
       props.type === 'textarea' || props.autogrow === true
diff --git a/ui/src/composables/private.use-field/use-field.js b/ui/src/composables/private.use-field/use-field.js
index eda66f0e4f6..699ae60dce7 100644
--- a/ui/src/composables/private.use-field/use-field.js
+++ b/ui/src/composables/private.use-field/use-field.js
@@ -71,7 +71,7 @@ export const useFieldProps = {
 
 export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur' ]
 
-export function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
+export function useFieldState ({ requiredForAttr = true, tagProp, hasChangeEvent = false } = {}) {
   const { props, proxy } = getCurrentInstance()
 
   const isDark = useDark(props, proxy.$q)
@@ -82,6 +82,7 @@ export function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
 
   return {
     requiredForAttr,
+    hasChangeEvent,
     tag: tagProp === true
       ? computed(() => props.tag)
       : { value: 'label' },
@@ -343,6 +344,7 @@ export default function (state) {
     }
 
     emit('update:modelValue', null)
+    state.hasChangeEvent === true && emit('change', null)
     emit('clear', props.modelValue)
 
     nextTick(() => {