From 4382f980457a5e06c687d8257fbfe8b7f41c695e Mon Sep 17 00:00:00 2001
From: Romain Hamel <romain@boilr.io>
Date: Tue, 14 Nov 2023 12:32:55 +0100
Subject: [PATCH] fix(Form): generate input uid on mounted to avoid hydration
 mismatch and collisions

---
 src/runtime/components/forms/Checkbox.vue |  3 +--
 src/runtime/components/forms/Radio.vue    | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/runtime/components/forms/Checkbox.vue b/src/runtime/components/forms/Checkbox.vue
index 0e38e3a972..337cc50aab 100644
--- a/src/runtime/components/forms/Checkbox.vue
+++ b/src/runtime/components/forms/Checkbox.vue
@@ -50,8 +50,7 @@ export default defineComponent({
   props: {
     id: {
       type: String,
-      // A default value is needed here to bind the label
-      default: () => uid()
+      default: () => null
     },
     value: {
       type: [String, Number, Boolean, Object],
diff --git a/src/runtime/components/forms/Radio.vue b/src/runtime/components/forms/Radio.vue
index 4f9ab81714..61cfb10a84 100644
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -2,7 +2,7 @@
   <div :class="ui.wrapper">
     <div class="flex items-center h-5">
       <input
-        :id="id"
+        :id="inputId"
         v-model="pick"
         :name="name"
         :required="required"
@@ -15,7 +15,7 @@
       >
     </div>
     <div v-if="label || $slots.label" class="ms-3 flex flex-col">
-      <label :for="id" :class="ui.label">
+      <label :for="inputId" :class="ui.label">
         <slot name="label">{{ label }}</slot>
         <span v-if="required" :class="ui.required">*</span>
       </label>
@@ -48,7 +48,7 @@ export default defineComponent({
     id: {
       type: String,
       // A default value is needed here to bind the label
-      default: () => uid()
+      default: () => null,
     },
     value: {
       type: [String, Number, Boolean],
@@ -103,7 +103,14 @@ export default defineComponent({
     const { ui, attrs } = useUI('radio', toRef(props, 'ui'), config, toRef(props, 'class'))
 
     const radioGroup = inject('radio-group', null)
-    const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
+    const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config) 
+    const inputId = ref(props.id)
+
+    onMounted(() => {
+      if (!inputId.value) {
+        inputId.value = uid()
+      }
+    })
 
     const pick = computed({
       get () {
@@ -130,6 +137,7 @@ export default defineComponent({
     })
 
     return {
+      inputId,
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,