PrimeDropdown: ClearIcon on focus and when wrapped by InputGroup doesn't clickable

[rmalkevy]

Describe the bug

How to reproduce: 1) Wrap your Dropdown using the InputGroup component. 2) Select an element in Dropdown 3) Do not click outside of the component. It has to stay focused. 4) Try to click on the clear icon. It just opens a dropdown. 5) the clear icon will work fine if you unfocus the element.

<template>
  <InputGroup>
    <InputGroupAddon>
      <i class="pi-envelope"></i>
    </InputGroupAddon>
    <Dropdown
      v-model="selectValue"
      :options="['apple', 'orange', 'banana']"
      :showClear="true"
    />
  </InputGroup>
</template>

<script setup>
import { ref } from 'vue'
const selectValue = ref()
</script>

Reproducer

https://stackblitz.com/edit/primevue-3-vite-issue-template-namuzf?file=src%2FApp.vue

PrimeVue version

3.53.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Cleared selected value by clicking on clear icon

[BlaiseGratton]

@rmalkevy I ran into this issue as well, for now this fix works:

    <Dropdown
      v-model="selectValue"
      :options="['apple', 'orange', 'banana']"
      :showClear="true"
      :pt="{
        clearIcon: {
          style: 'z-index: 10'
        }
      }"
    />