AutoComplete closing before being able to select item or click "Create new ..." button

[beepsoft]

This actually happens when using the component in https://github.com/describo/crate-builder-component-react but I don't think it is react (or web component) related.

Here I try to add a new "Dataset Contact". When I start to type the name the autocomplete items and the "Create new" button appears, however it quickly closes afterwards and so I am unable to click any of the items or the "Create new" button. After some trials it sometimes stays on screen (as in the gif) below, but it is just pure luck.

Do you have any what could cause this or how to workaround?

[marcolarosa]

I can't replicate this. It's not happening in the source repo.

[beepsoft]

You are right, this issue doesn't seem to occur in the Vue project. It's possible that it's related to web component compilation, which I'll investigate further today. I thought you may have some insights on what event or action might be triggering the autocomplete to close so quickly.

[marcolarosa]

Sorry no. And I expect you are right. I wonder if this and the issue in #38 are related - maybe there's CSS not being compiled which is then causing these quirks?

[beepsoft]

Yes, I think too that the root cause maybe an incomplete css, or something similar.

[beepsoft]

I wonder if changing this persistent value to true would be OK with you?

https://github.com/describo/crate-builder-component/blob/a477b64910eb24d3d7e5c647ce09b1e1d0222572/src/crate-builder/RenderEntity/AutoComplete.component.vue#L12

I tried it and with true it seems to work both in vue and in wc/react.

[marcolarosa]

From the docs: https://element-plus.org/en-US/component/select.html#select-attributes

persistent:  when select dropdown is inactive and persistent is false, select dropdown will be destroyed

Have you checked that when it loads again somewhere else it is being initialised correctly?

[beepsoft]

I also checked the docs, but couldn't really figure out what persistence was meant here or how it affects the component, but nevertheless it seems to work as before. Added different fields with the same kind of class (author, editor) and the entered entities appeared and were reusable. Also added other kind of fields and they worked too.

[beepsoft]

@marcolarosa, I found a better workaround, could you please take a look at it? Without proper autocomplete mechanism we cannot use the crate builder from React. This fix makes it work in WC/react, while not affecting the Vue behaviour (I hope).

[marcolarosa]

Please check b6764c4659e7277bceedc1a5c76afd57dc582527 for a slight tweak to your workaround; comment in the PR about it. I understand your description of the problem so hopefully this resolves it for you.

[beepsoft]

Thanks, Marco, for taking the time to work on it!

Please check b6764c4 for a slight tweak to your workaround; comment in the PR about it. I understand your description of the problem so hopefully this resolves it for you.

Unfortunately this results in the same problem as setting data.selection = queryString in querySearch. If you try to type slowly, after typing a character debouncedQuerySearch kicks in and starts searching, while you already typed the second character, which will be removed as the queryString is the old string with just 1 character and data.selection will be reset to it after the 500ms timeout.

This video may explain it better. Here I type "asdfghj" continuously, but slowly:

screencast-www.google.com-2023.04.25-06_42_56.webm

What we need is that when debouncedQuerySearch is called we need to set data.selection = queryString right away and then start the search with a timeout. Is there another way to keep the queryString and data.selection in sync without doing this at debouncedQuerySearch time?

[marcolarosa]

I think this is resolved.