[Bug Report][3.7.2] V-autocomplete vertical direction

[Doltario]

Environment

Vuetify Version: 3.7.2
Vue Version: 3.4.26
Browsers: Firefox 131.0
OS: Mac OS 10.15

Steps to reproduce

Open the link, notice that v-autocomplete width seems really small. It occurs when the direction="vertical" prop is added.

Expected Behavior

Width to be usable.

Actual Behavior

The width is unsetable and really small, so that user can't even see the selected values.

Reproduction Link

https://play.vuetifyjs.com/#...

[yogender-kulshrestha]

If your goal is to display the selected chips in the v-autocomplete vertically, instead of using direction="vertical", you can apply a custom CSS rule to achieve the same layout.

You can add the following custom CSS to handle the vertical stacking of chips:

.custom-width .v-field__input {
  display: grid;
}

This will ensure that the selected chips are displayed in a vertical stack, without causing the width issue that occurs when using the direction="vertical" prop. This approach allows you to maintain control over the width and layout while achieving the desired vertical chip display.

Solution Link

https://play.vuetifyjs.com/#...

[Doltario]

Hi, thanks for your answer and for providing a demo link.

Your workaround may work, nevertheless it is still a bug that should be fixed. The prop as it is, is not usable at all.

[MatthewAry]

Hi there, I tried to track down what this prop is supposed to do from a logical standpoint and it seems to be inherited from the VInput component. Please see:

• vuetify/packages/vuetify/src/components/VInput/VInput.tsx

  Lines 56 to 60 in ca85fc0

  	direction: {
  	type: String as PropType<'horizontal' | 'vertical'>,
  	default: 'horizontal',
  	validator: (v: any) => ['horizontal', 'vertical'].includes(v),
  	},

• vuetify/packages/vuetify/src/components/VInput/VInput.tsx

  Line 163 in ca85fc0

  `v-input--${props.direction}`,

• vuetify/packages/vuetify/src/components/VInput/VInput.sass

  Lines 22 to 31 in ca85fc0

  	.v-input--vertical
  	grid-template-areas: "append" "control" "prepend"
  	grid-template-rows: max-content auto max-content
  	grid-template-columns: min-content
  	.v-input__prepend
  	margin-block-start: $input-affix-margin-inside
  	.v-input__append
  	margin-block-end: $input-affix-margin-inside

After looking at it, (I'm not super experienced with CSS Grids) my best guess is that this prop is meant to vertically stack the Append, Control, and Prepend slots on the component, not vertically stack the contents of the control. Clearly using it can break components. My take? This prop should not be inherited by VSelect, VCombobox, or VAutocomplete, and probably others. It's a low level prop in VInput.

I will mark this as a bug because a correction is required, even if it's not going to be the fix you're looking for.

TLDR: This prop is probably not meant to do what you're hoping it will do.