From 3afcd2b602db9a62c17e76e6c13b2757facde7ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Mon, 11 Nov 2024 18:12:55 -0500
Subject: [PATCH] refactor(components): update pairing selector

- add data-testid attr
- change placement of menu popup
- allow selection clearing
---
 components/story/atoms/pairings.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/story/atoms/pairings.vue b/components/story/atoms/pairings.vue
index 0973b6f..e58b2df 100644
--- a/components/story/atoms/pairings.vue
+++ b/components/story/atoms/pairings.vue
@@ -19,7 +19,15 @@
 	<a-form-item label="Pairings">
 		<a-row :gutter="5" :wrap="true" v-for="(field, idx) in fields" :key="field.key">
 			<Field :name="fname + 'relationships' + `[${idx}]`">
-				<a-select mode="multiple" v-bind="$attrs" :options="opts" v-model:value="field.value as string[]" @change="(val) => update(idx, val as string[])">
+				<a-select
+					mode="multiple"
+					placement="topLeft"
+					:data-testid="`${$attrs['data-testid']}.${idx}`"
+					:options="opts"
+					v-model:value="field.value as string[]"
+					@change="(val) => update(idx, val as string[])"
+					:allow-clear="true"
+				>
 					<template #removeIcon>
 						<i class="far fa-circle-x" />
 					</template>