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

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