feat: add dialog description and refactor variant selection to use native select element in RetailStockTransferModal

resources/js/components/modal/RetailStockTransferModal.vue

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button';
 import {
     Dialog,
     DialogContent,
+    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
@@ -18,14 +19,7 @@ import {
     FieldLabel,
     FieldSet,
 } from '@/components/ui/field';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { apiFetch } from '@/lib/api';
 import { transfer } from '@/routes/admin/manage/retail-stock';
@@ -54,6 +48,7 @@ const emit = defineEmits<{
 
 const processing = ref(false);
 const errors = reactive<Record<string, string>>({});
+const selectPortalTarget = ref<HTMLElement>();
 
 const selectedVariantId = ref(0);
 
@@ -151,6 +146,9 @@ function formatNumber(value: number): string {
                 <DialogTitle class="flex items-center gap-2">
                     Transfer Stok Ecer
                 </DialogTitle>
+                <DialogDescription class="sr-only">
+                    Form pengajuan transfer stok ecer untuk produk {{ productName }}
+                </DialogDescription>
             </DialogHeader>
 
             <div class="space-y-4">
@@ -159,20 +157,21 @@ function formatNumber(value: number): string {
 
                     <Field v-if="hasMultipleVariants">
                         <FieldLabel for="transfer-variant" required>Pilih Varian</FieldLabel>
-                        <Select :model-value="selectedVariantId ? String(selectedVariantId) : undefined" @update:model-value="selectedVariantId = Number($event)">
+                        <Select
+                            :model-value="selectedVariantId ? String(selectedVariantId) : undefined"
+                            @update:model-value="selectedVariantId = Number($event)"
+                        >
                             <SelectTrigger id="transfer-variant" class="w-full">
                                 <SelectValue placeholder="Pilih varian" />
                             </SelectTrigger>
-                            <SelectContent>
+                            <SelectContent :to="selectPortalTarget">
-                                <SelectGroup>
+                                <SelectItem
-                                    <SelectItem
+                                    v-for="variant in props.variants"
-                                        v-for="variant in variants"
+                                    :key="variant.id"
-                                        :key="variant.id"
+                                    :value="String(variant.id)"
-                                        :value="String(variant.id)"
+                                >
-                                    >
+                                    {{ variant.name }}
-                                        {{ variant.name }}
+                                </SelectItem>
-                                    </SelectItem>
-                                </SelectGroup>
                             </SelectContent>
                         </Select>
                     </Field>
@@ -237,6 +236,7 @@ function formatNumber(value: number): string {
                     </DialogFooter>
                 </form>
             </div>
+            <div ref="selectPortalTarget" class="contents"></div>
         </DialogContent>
     </Dialog>
 </template>

resources/js/components/ui/select/SelectContent.vue

@@ -16,20 +16,20 @@ defineOptions({
 })
 
 const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
+  defineProps<SelectContentProps & { class?: HTMLAttributes["class"], to?: string | HTMLElement }>(),
   {
     position: "popper",
   },
 )
 const emits = defineEmits<SelectContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class", "to")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <SelectPortal>
+  <SelectPortal :to="to">
     <SelectContent
       data-slot="select-content"
       v-bind="{ ...$attrs, ...forwarded }"