Ant Design (V3.2.20) Select dropdwn blinks whenever I click 2nd time after closing it. VUE3, VUEJS

37 Views Asked by At

I am using Vue3 and just installed Ant Design (V3.2.20), everything was smooth but then I realized two issues:

Once the component renders and I click on any dropdown it shows my default 10 options which I have shown it as default options. But when I click 2nd time on the same dropdown it just flashes the options and closing it self each time I click on the select field.

I have attached a video link below: https://drive.google.com/drive/folders/1EWAWMhm8VnHolRBdWavD57A4r6nmbGjE?usp=drive_link

This is my a-select component:

<a-select
  v-model:value="line.slot_1"
  showSearch
  style="width: 140px"
  :allowClear=true
  :options="state?.afterSearchJobCards"
  @search="fetchJobCardsWithDebounce" >
</a-select>

Used this in my vite.config plugins:

Components({ resolvers: [AntDesignVueResolver()] })

For a full component reference please head to the same link I have shared above, it contains both clip and a component file.

  1. A searchable dropdown with 10 default options listed.
  2. On search it will fetch other available options.
  3. On click of an option it will be shown as select and update the state referenced slot in which it was selected.
0

There are 0 best solutions below