Props are not passed to "treeview"

[Dinuz]

@kolesnikovav Thank you so much for this great toolkit.

I was trying to implement the basic VTreeSelect but I am facing some issue when I try to pass props to the "treeview" part.

From your documentation:

This component extends VAutocomplete component. It contains all properties, slots, events of extended component. The part of VTreeSelect component is VTreeview. Properties and events are repeated. Scoped slots of VTreeview are transformed

I went into the code and seems like the props are merged in the final component, but I am not able to pass them at all.

For example if I want to change the color of the select checkbox, vuetify indicate i should pass the new color using the prop selected-color but this doesn't work in your component (it works however in vuetify). Same goes with the expand-icon (I would love to use it to change the expand icon); again it work in vuetify but not in your component.

(1) Vuetify example (this works)

<v-treeview :items="items" :expand-icon="'$chevronDown'" selectable :selected-color="secondary"></v-treeview>

(2) Toolkit example (this doesn't work)

<v-tree-select
      expand-icon="'$chevronDown'"
      independent
      autocomplete
      dense
      multiple
      :selectable="false"
      :items="items"
      placeholder="Test"
      outlined
      hide-details="auto"
      :menu-props="{
        bottom: true,
        maxHeight: 300
      }"
      :append-icon="'$chevronDown'"
      color="grey darken-2"
      selected-color="secondary"
    >
</v-tree-select>

What I am doing wrong? I am passing the props in a wrong way? If so how I should pass them?

Thanks

P.S. Would be very nice if was possible inserting a fixed header and a fixed footer in the menu (absolute positioned for example), and let the menu scroll under them (the menu should have a fix height, and scrollable)

[kolesnikovav]

@Dinuz Hi. Thank you for your bug report and suggestion. Actually, some properties doesn't pass into treeview as expected.

Your proposal is good, but it needed to take a look at scroll behaviour, when menu has fixed height. By the way, native vuetify v-select scrolls menu content entirely what is unexpected. Header or footer should be fixed. Bug will be fixed, and I will try to implement your proposal. Thanks.

[Dinuz]

@kolesnikovav I agree with you, the native vuetify select component doesn't work either. The select component menu scrolls the whole menu and that is an issue. In order to allow a fix header or footer, the treeview or the selectList should be wrapped, and then header slot and footer slot should be added. The wrapper should be position: relative and overflow-y: auto;and the header and the footer should be positioned for example sticky or absolute.

This setup works very well on the selectList and the treeview, but when you add it to the select component, then you must modify how the "input focus" works.

The issue is that the menu get triggered to open when the select input field get focus, and the menu get triggered to close when the select input field lose focus (blur). This must be modified in order to allow click or action not just in the menu items, but also on the header and the footer.

I totally agree with you the native vuetify behavior is buggy and wrong, and doesn't even make sense in their examples: why I want to add a select all that doesn't stay fix in my menu? Well that happens because, following their example they create the header as prepend item, so the item is still inside the content flux, and consequently it scrolls with the content.

I see the header and footer as a way to insert for example a search field or a select all or on footer for example a confirm or cancel buttons etc.

I don't know exactly why the props in your component are not getting passed to the "internal treeview" (I am not a typescript's fan), but if I was extending it in js, I should have to make the props as computed properties and bind to the component and I should also add the event listeners on it.