search

directus / directus

The flexible backend for all your projects 🐰 Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth & more.
https://directus.io
Other
27.74k stars 3.86k forks source link

Can't select with autocomplete field #13860

Closed ansutung closed 2 years ago

ansutung commented 2 years ago

Describe the Bug

I selected item but not effect.

https://user-images.githubusercontent.com/26163387/173274073-033e7647-b01a-4f9c-883a-863d67d91f7d.mp4

It's work well on version 9.10.x, but issues after upgrade.

To Reproduce

Issue when click on item

Errors Shown

No response

What version of Directus are you using?

9.12.2

What version of Node.js are you using?

12.18.3

What database are you using?

MSSQL 14.0

What browser are you using?

Chrome

How are you deploying Directus?

locally

azrikahar commented 2 years ago

Seems like the @blur="deactivate" event for v-input (right when we select an option) is firing "earlier" thus causing any selection to not really register.

Note: as there was no code change to this interface since last year, went and confirmed that this used to work in 9.12.0 (specifically tested on 2f8c9aca), so this is likely linked to the vue update in #13713.

Alternative reproduction steps:

  1. Create a collection with an Autocomplete Api field

  2. Use the following configuration during field creation:

    • URL: https://restcountries.com/v3.1/name/{{value}}?fields=name,cca2
    • Text Path: name.common
    • Value Path: cca2

  3. Save and create this field.

  4. Attempt to create a new record for the new collection, type in and search for a country name (eg. aust to see Australia and Austria).

  5. Try to click on the option, but it will not actually select the option and only closes the menu.