Taginput: cannot remove custom items, no removeItem() function

[Thaurin]

Overview of the problem

Oruga version: [0.8.7]
Vuejs version: [3.4.21]
OS/Browser: Windows 10/Chrome

Description

When using a custom template for taginput items, the removeItem() seems to be not available anymore on the taginput ref, resulting in a TypeError.

Steps to reproduce

It is reproducible on the Oruga documentation page for Taginput: scroll to the "Custom selected" example, add a few items, and click on an item. Pay attention to the Javascript console:

framework.BWCDurWU.js:13 TypeError: n.$refs.input.removeItem is not a function

Expected behavior

The item should get deleted from the taginput's item list. The items can still be removed by using the keyboard shortcut Backspace.

Actual behavior

Nothing happens when an item is clicked in the example, besides the Javascript error.

[Thaurin]

It seemed to me it was just missing from defineExpose in Taginput.vue, since focus works fine. So I added removeItem to it in #888. Maybe it should be renamed to remove to be more in line with focus (containing setFocus())? The fix was tested locally and it worked for me.

[Thaurin]

Note: this looks to be a regression from release 0.8.0. Are there any other bindings that need to be exposed?

Refactor all components from Option-API to Composition-API (script setup) (#606)

[mlmoravek]

@Thaurin first of all, thanks for finding this bug!
The example seems to have been missed during refectoring.

You are right, with the switch to the Composition API, all component data, functions etc... are now closed by default.
My intention is to keep this as much as possible.

The example seems to have been missed during refectoring.

For me a better solution would be to add the removeItem as a selected slot property.

Would that solve your problem too?

[Thaurin]

While I personally love the flexibility of being able to use all sorts of a component's internal functionalities, because I love to customize, I understand your choice to limit this as much as possible. I'm glad that focus is exposed, at least!

For my current situation, if your solution works as well, I'd be happy. Would that simply work something like this?

<o-taginput v-model="searchItems">
  <template v-slot:selected="{ items, removeItem }">
    <o-button
      v-for="(item, index) in items"
      @click="removeItem(index, $event)"
  </template>
</o-taginput>

I've tried manipulating the v-model on taginput directly from the click event, but that caused some sort of Vue render error.

[Thaurin]

I added remove-item to the selected slot and it seems to work fine as written above. I suppose if you go with this solution, the documentation needs to be updated, as well. On the other hand, there could be more components that underwent the same thing after the refactoring?

[Thaurin]

I updated the documenation for completeness sake. This solution works for me. I didn't find any other $refs in any of the other examples, so that should be fine.

If you want to do anything differently, go ahead, of course.