fix radio field type

app/javascript/submission_form/area.vue

@@ -97,11 +97,11 @@
         :value="false"
         class="aspect-square base-radio"
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
-        :checked="modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
+        :checked="!!modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
         @click="$emit('update:model-value', field.options.find((o) => o.uuid === area.option_uuid)?.value)"
       >
       <IconCheck
-        v-else-if="modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
+        v-else-if="!!modelValue && modelValue === field.options.find((o) => o.uuid === area.option_uuid)?.value"
         class="aspect-square"
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
       />
@@ -116,11 +116,11 @@
         :value="false"
         class="aspect-square base-checkbox"
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
-        :checked="modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+        :checked="!!modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
         @change="updateMultipleSelectValue(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
       >
       <IconCheck
-        v-else-if="modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
+        v-else-if="!!modelValue && modelValue.includes(field.options.find((o) => o.uuid === area.option_uuid)?.value)"
         class="aspect-square"
         :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
       />

app/javascript/template_builder/field.vue

@@ -193,6 +193,7 @@
       </div>
       <div
         v-if="field.options"
+        ref="options"
         class="border-t border-base-300 mx-2 pt-2 space-y-1.5"
         draggable="true"
         @dragstart.prevent.stop
@@ -206,7 +207,7 @@
             {{ index + 1 }}.
           </span>
           <div
-            v-if="['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid)) && !field.areas.find((a) => a.option_uuid === option.uuid)"
+            v-if="['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid) || !field.areas.length) && !field.areas.find((a) => a.option_uuid === option.uuid)"
             class="items-center flex w-full"
           >
             <input
@@ -218,6 +219,7 @@
             >
             <button
               title="Draw"
+              tabindex="-1"
               @click.prevent="$emit('set-draw', { field, option })"
             >
               <IconNewSection
@@ -237,6 +239,7 @@
           >
           <button
             class="text-sm w-3.5"
+            tabindex="-1"
             @click="removeOption(option)"
           >
             &times;
@@ -345,6 +348,12 @@ export default {
     addOption () {
       this.field.options.push({ value: '', uuid: v4() })
 
+      this.$nextTick(() => {
+        const inputs = this.$refs.options.querySelectorAll('input')
+
+        inputs[inputs.length - 1]?.focus()
+      })
+
       this.save()
     },
     removeOption (option) {