fix(VChip): overflow text in chip selections (#17283)

fixes #16472
vuetifyjs · May 9, 2023 · 0a681c8 · 0a681c8
1 parent 6f67aad
commit 0a681c8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/packages/vuetify/src/components/VChip/VChip.sass b/packages/vuetify/src/components/VChip/VChip.sass
@@ -6,8 +6,10 @@
   align-items: center
   cursor: default
   display: inline-flex
+  flex: 1 0
   font-weight: $chip-font-weight
   max-width: $chip-max-width
+  min-width: 0
   overflow: hidden
   position: relative
   text-decoration: none
@@ -36,6 +38,14 @@
     @include tools.rounded($chip-label-border-radius)
 
 // Elements
+.v-chip__content
+  .v-autocomplete__selection &,
+  .v-combobox__selection &,
+  .v-select__selection &
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+
 .v-chip__filter,
 .v-chip__prepend,
 .v-chip__append,

diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx
@@ -261,14 +261,16 @@ export const VChip = genericComponent<VChipSlots>()({
             </div>
           )}
 
-          { slots.default?.({
-            isSelected: group?.isSelected.value,
-            selectedClass: group?.selectedClass.value,
-            select: group?.select,
-            toggle: group?.toggle,
-            value: group?.value.value,
-            disabled: props.disabled,
-          }) ?? props.text }
+          <div class="v-chip__content">
+            { slots.default?.({
+              isSelected: group?.isSelected.value,
+              selectedClass: group?.selectedClass.value,
+              select: group?.select,
+              toggle: group?.toggle,
+              value: group?.value.value,
+              disabled: props.disabled,
+            }) ?? props.text }
+          </div>
 
           { hasAppend && (
             <div key="append" class="v-chip__append">