Allow disabling same width for attached dropdown menu (#16365)

* allow configuring width for attached menu

* add prop to v-select

* simpler prop naming

* update test snapshot

app/src/components/v-menu.vue

@@ -83,6 +83,8 @@ interface Props {
 	closeOnContentClick?: boolean;
 	/** Attach the menu to an input */
 	attached?: boolean;
+	/** Should the menu have the same width as the input when attached */
+	isSameWidth?: boolean;
 	/** Show an arrow pointer */
 	showArrow?: boolean;
 	/** Menu does not appear */
@@ -107,6 +109,7 @@ const props = withDefaults(defineProps<Props>(), {
 	closeOnClick: true,
 	closeOnContentClick: true,
 	attached: false,
+	isSameWidth: true,
 	showArrow: false,
 	disabled: false,
 	trigger: null,
@@ -150,6 +153,7 @@ const {
 	computed(() => ({
 		placement: props.placement,
 		attached: props.attached,
+		isSameWidth: props.isSameWidth,
 		arrow: props.showArrow,
 		offsetY: props.offsetY,
 		offsetX: props.offsetX,
@@ -278,7 +282,16 @@ function usePopper(
 	reference: Ref<HTMLElement | null>,
 	popper: Ref<HTMLElement | null>,
 	options: Readonly<
-		Ref<Readonly<{ placement: Placement; attached: boolean; arrow: boolean; offsetY: number; offsetX: number }>>
+		Ref<
+			Readonly<{
+				placement: Placement;
+				attached: boolean;
+				isSameWidth: boolean;
+				arrow: boolean;
+				offsetY: number;
+				offsetX: number;
+			}>
+		>
 	>
 ): Record<string, any> {
 	const popperInstance = ref<Instance | null>(null);
@@ -381,7 +394,7 @@ function usePopper(
 		if (options.value.attached === true) {
 			modifiers.push({
 				name: 'sameWidth',
-				enabled: true,
+				enabled: options.value.isSameWidth,
 				fn: ({ state }) => {
 					state.styles.popper.width = `${state.rects.reference.width}px`;
 				},

app/src/components/v-select/__snapshots__/v-select.test.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`Mount component 1`] = `"<v-menu-stub class=\\"v-select\\" disabled=\\"false\\" attached=\\"true\\" show-arrow=\\"false\\" close-on-content-click=\\"true\\" placement=\\"bottom\\" data-v-cdcb6889=\\"\\"></v-menu-stub>"`;
+exports[`Mount component 1`] = `"<v-menu-stub class=\\"v-select\\" disabled=\\"false\\" attached=\\"true\\" is-same-width=\\"true\\" show-arrow=\\"false\\" close-on-content-click=\\"true\\" placement=\\"bottom\\" data-v-cdcb6889=\\"\\"></v-menu-stub>"`;

app/src/components/v-select/v-select.vue

@@ -3,6 +3,7 @@
 		class="v-select"
 		:disabled="disabled"
 		:attached="inline === false"
+		:is-same-width="isMenuSameWidth"
 		:show-arrow="inline === true"
 		:close-on-content-click="closeOnContentClick"
 		:placement="placement"
@@ -182,6 +183,8 @@ interface Props {
 	multiplePreviewThreshold?: number;
 	/** The direction the menu should open */
 	placement?: Placement;
+	/** Should the menu be the same width as the select element */
+	isMenuSameWidth?: true;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -205,6 +208,7 @@ const props = withDefaults(defineProps<Props>(), {
 	label: false,
 	multiplePreviewThreshold: 3,
 	placement: 'bottom',
+	isMenuSameWidth: true,
 });
 
 const emit = defineEmits(['update:modelValue', 'group-toggle']);

app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue

@@ -24,6 +24,7 @@
 					item-text="name"
 					item-disabled="meta.singleton"
 					multiple
+					:is-menu-same-width="false"
 					:multiple-preview-threshold="0"
 				/>
 			</div>