Vuetify: [Feature Request] A new prop for v-combobox

[workxf]

Problem to solve

Could you please add a "max-length" for v-combobox component, because where I enable chip prop for this component and input a very long text into it, the chip will not wrap to next line, same problem with components have the chip prop.I'm not good at english, hope you could understand what I'm trying to describe

Proposed solution

limit the input max-length

[praveenpuglia]

How about adding class to your chips and use that class in CSS to have ellipsis for your text inside chip?

[workxf]

@praveenpuglia

like this, i had tried to add some styles:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;

but the close button for the chip is hidden because the chip content dont have a container and "overflow: hidden"

[praveenpuglia]

Thanks for the additional info @workxf.

@johnleider we generate the close button as a child of content for the chip which seems weird. Shall we change it so that the content lives on its own and the close button is made as a sibling of the content?

That'll allow people to do anything with content while the close button functionality remains as is.

[johnleider]

Maybe this is a reason to upgrade v-select-list to use v-item-group.

[mrtcnnccn]

Adding a multiline option may also be considered.

[ram33]

@workxf You can try passing 'selection' slot with a chip to v-combobox. It worked for me. You may need to adjust max-width conditionally based on close button and avatar.

<template slot="selection">
  <v-chip close>
    <span class="chip-label">A chip with huge content</span>
  </v-chip>
</template>

.chip-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }

[kimamula]

Removing a chip upon clicking the close icon can be achieved by assigning parent.selectItem(item) to @click:close.

<template v-slot:selection="{ item, parent }">
  <v-chip close @click:close="parent.selectItem(item)">
    <span class="chip-label">{{ item }}</span>
  </v-chip>
</template>

[johnleider]

Thank you for the Feature Request and interest in improving Vuetify. After careful consideration the team has decided that this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.