Quasar, Input Clearable, Show "clear" button only when in focus - quasar

Question

I'm using q-input from Quasar framework. I made the "clear" button from this website -> https://quasar.dev/vue-components/input#clearable
How to make the "clear" button is hidden when there is no focus in the "input" field.
And make the "clear" button is displayed when you focus in the "input" field. (using Quasar framework)
The "clear" button: is a small icon of a cross that shows in the input field.
HTML
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md">
<div class="q-gutter-y-md column" style="max-width: 300px">
<!-- equivalent -->
<q-input color="orange" filled v-model="text" label="Label">
<template v-if="text" v-slot:append>
<q-icon name="cancel" #click.stop.prevent="text = null" class="cursor-pointer"></q-icon>
</template>
</q-input>
</div>
<div class="q-gutter-y-md column" style="max-width: 300px">
<!-- equivalent -->
<q-input color="orange" filled v-model="text" label="Label">
<template v-if="text" v-slot:append>
<q-icon name="cancel" #click.stop.prevent="text = null" class="cursor-pointer"></q-icon>
</template>
</q-input>
</div>
<div class="q-gutter-y-md column" style="max-width: 300px">
<!-- equivalent -->
<q-input color="orange" filled v-model="text" label="Label">
<template v-if="text" v-slot:append>
<q-icon name="cancel" #click.stop.prevent="text = null" class="cursor-pointer"></q-icon>
</template>
</q-input>
</div>
</div>
</div>
JS + Quasar
const { ref } = Vue
const app = Vue.createApp({
setup () {
return {
text: ref('Some text')
}
}
})
app.use(Quasar, { config: {} })
app.mount('#q-app')
Now the input fields look like this (The "clear" button is displayed regardless of focus):
I want it to look like this (The "clear" button only in the field in which there is focus)
How can this be done ?

Answer 1

Please refer following code.
<q-input color="orange" filled v-model="text" label="Label" #focus="focus=true" #blur="focus=false">
<template v-slot:append>
<q-icon name="cancel" v-if="text && focus" #click.stop.prevent="text = null"
class="cursor-pointer"></q-icon>
</template>
</q-input>
https://codepen.io/Pratik__007/pen/RwBoLQb