V-autocomplete implementation

[DaanVervacke]

Hey, first of all... this package is amazing!

Using inline fields inside my Vuetify data-table has drastically improved the performance of my web app.

I do wonder, do you plan to create an inline field variant for v-autocomplete?

I'm currently using one inside the VInlineCustomField component, but I'm experiencing some issues:

• The menu doesn't get triggered, even when setting :autofocus='true' on v-autocomplete.
• My model value only updates when pressing the save button. Is there a way to update it when selecting a new item?
• The cancel button is not hideable by using a prop (afaik).
• Is it possible to make the whole field clickable? Instead of only the text.

Either way, I'm fully sold on this project and will be using it on all my future projects! Thanks!

[webdevnerdstuff]

Thanks for the feedback, I do appreciate it!

Let me address your bullet points first. Some stuff might be me just thinking out loud.

• The menu doesn't get triggered, even when setting :autofocus='true' on v-autocomplete.

To do that you would use the menu prop and set it to true. This works like the select component in that respect.

• My model value only updates when pressing the save button. Is there a way to update it when selecting a new item?

Currently I don't believe there is a way. There is the internal event @update:closeSiblingFields, but that won't work. I think I would have to add another emitted event, perhaps something like @update:saveSiblingFields. When I have some free time I might play around with this idea.

• The cancel button is not hideable by using a prop (afaik).

That should be easy to add. I have a hide-save-icon prop that hides the save button, so I tested a hide-cancel-icon and that seemed pretty straight forward to add. That can probably go out with the next release. Only debate is using hide-cancel-button, but that doesn't match up with hide-save-icon, which in hindsight would have made more sense to be hide-save-button. Maybe I'll add alternatives to cover both, or replace the hide-save-icon (since this package is still in beta, but it would be a breaking change if using hide-save-icon

• Is it possible to make the whole field clickable? Instead of only the text.

I can see about adding another prop, perhaps cell-clickable, cell-to-open, or maybe even just cell. If you have any other ideas on a prop name let me know, as I'm not solid on either or those two yet. Hopefully it's just some simple css tweaking to add that ability. I think I also need to fix alignment issues as currently setting the cell alignment doesn't really work without having to add additional css. So we'll see.

How would you see this working? Would the underline (when using it) be the full width of the cell, or keep it only on the displayed value, but make the whole cell clickable to open the field?

Now to answer the first question about adding an VInlineAutocomplete component.

I don't think using the VInlineCustomField will work for an autocomplete. It's basically a kind of select list, which to have things display properly it does need a bit more work on the component side to display the selected value (when field not active) since it deals with an object instead of a string/number/boolean, like many other fields do. I was able to get it sort of working using the VInlineCustomField, but the displayed value winds up being the selected item's object, instead of the item-title that is set.

But with that said, I threw together a VInlineAutocomplete by copying the VInlineSelect and changed it's to the v-autocomplete component, and it worked. I would need to look into it some more and test it with any possible v-autocomplete props that the v-select doesn't have. But so far the quick and easy test seems to work.

Just for my mental notes, props v-autocomplete has that v-select does not:

• custom-filter
• custom-key-filter
• filter-keys
• filter-mode
• no-filter
• search

[webdevnerdstuff]

So I went ahead and added a couple things today anyway. Both of these changes on the dev branch if you want to check it out using the built in playground with the repo. Adding the VInlineAutocomplete I need to test some more, so that'll probably wait until after I publish these current new additions.

I added hide-cancel-icon prop. I also added cell and cell-underline-full-width props for clicking on the cell to open the field functionality.

If you want to checkout the VInlineAutocomplete component, you can check that out in the autocomplete branch.

[DaanVervacke]

Thanks for your quick response!

Adding :menu='true' to the v-autocomplete does indeed fix my first problem, no need for :autofocus='true'.
I've tested the new props inside the playground and they all seem to be working very well.

cell does have a weird effect on the other table columns. Regardless of the other new props being true or false. Looks like there are some alignment issues.

Before:

After:

[DaanVervacke]

I tested VInlineAutocomplete and encountered no issues.

I also tried adding some extra props to simulate the field I'm aiming to create inside my web app. I've listed them below:

• v-model.trim="item.user"
• :auto-select-first="componentOptions.autoSelectFirst"
• :menu-icon="componentOptions.menuIcon"

Worked just fine.
It would be nice if these could be added to the default props (if possible, of course).

Adding @keyup.enter="saveValue" and @update:model-value="saveValue" to the v-autocomplete inside the VInlineAutocomplete component solves the issue mentioned in the second bullet point. As you mentioned, having a separate event prop for that purpose would be nice :)

By applying all of the above and using the cell and hide-cancel-icon props, I've managed to create the field I was aiming for.

Thanks again for your work. (check your PayPal). I look forward to testing out the next version of the package!

[webdevnerdstuff]

Thank you for the contribution! :)

The alignment issue is because for the switch and checkbox fields, I have them centered as if they were not the underline when full width looks weird. I'm not 100% happy with alignment stuff just yet, so that'll probably be a work in progress. Getting things lined up so they don't look like they move much between the displayed value and the field value was a challenge, so alignments other than left kinda of got neglected/left out.

For the props. I'm not aware of a trim prop that will bind to the model value.

The auto-select-first prop does seem to work. I had to reread the prop description myself as I thought it wasn't working for a second. All that prop does is when you start typing, it selects (more highlights it) the first result in the dropdown. It doesn't actually "select" it exactly. Also, I assume you added this (componentOptions.autoSelectFirst) to the componentOptions object? `

The menu-icon prop did work for me. Same as above with the componentOptions.menuIcon with adding it to the componentOptions object?

I'll tested out some ideas for the saveValue. I added a prop save-on-select to go with your events so it's not always triggered if the user doesn't want it to. I tested adding those two events, but there are some side affects I would need to figure out. For example, if you use the backspace to delete the current value, and it get's to no value, it automatically saves because the model value is updated at that point. Similar issue if you highlight the current value, and delete it. I'll have to think about these some more.

On a side note, in your second screenshot, the body column has overflow issues. What caused that, or was that just you messing around with it?

[DaanVervacke]

Yes, I did add componentOptions.autoSelectFirst to the componentOptions object.
The body column overflows when I set cell to true. Regardless of any other new props that might be enabled/disabled.

[webdevnerdstuff]

@DaanVervacke Moved the package out of beta today since I know that vue is keeping defineModel (which was why I was waiting). This release also has the cell editing. :)

Haven't had time to work on the Autocomplete field just yet, but it's still planned.

[DaanVervacke]

Awesome! I'll be implementing v1.0.0 in my app. Looking forward to the autocomplete field 😄 !

[DaanVervacke]

Happy 2024! Any updates on the v-autocomplete component?

[webdevnerdstuff]

It's still on my list of things to do. I was hoping to fix a typescript issue with the library first (not major or breaking, but annoying as it's been fighting me aka, I'm having a hard time sorting it out) before digging into the autocomplete. I've also been busy with other projects (updates, bug fixes, adding vitest, optimization, etc.) and the such. I also took a few weeks around the holiday to take a break from coding (as much as possible), even though Home Assistant hooked me in. So it's definitely still planned, hopefully sooner than later.

[webdevnerdstuff]

@DaanVervacke I added it in with the latest release, but am calling it "beta" so I can take some time to test things out more when I have time, but it seems stable atm. I didn't add in a way to save when an item is selected, at least for now, as I feel like that may introduce complications.

Pull Request: #48