From 801925c443b1722617185e0da00f007d8f80a4ae Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 3 Jun 2026 16:24:19 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui)=20:=20SelectCheckbox=20tol=C3=A8re=20mo?=
 =?UTF-8?q?delValue=20absent=20(d=C3=A9faut=20[])=20=E2=80=94=20corrige=20?=
 =?UTF-8?q?crash=20SSR=20readonly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le composant accédait à props.modelValue.length sans garde alors que modelValue
était requis ; un usage non bindé (ex. page playground readonly) plantait le rendu SSR.
modelValue devient optionnel avec défaut [].

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../malio/select/SelectCheckbox.test.ts          | 16 ++++++++++++++--
 app/components/malio/select/SelectCheckbox.vue   |  3 ++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/components/malio/select/SelectCheckbox.test.ts b/app/components/malio/select/SelectCheckbox.test.ts
index 3be3f17..350b881 100644
--- a/app/components/malio/select/SelectCheckbox.test.ts
+++ b/app/components/malio/select/SelectCheckbox.test.ts
@@ -1,5 +1,5 @@
 import {describe, expect, it} from 'vitest'
-import {mount} from '@vue/test-utils'
+import {mount, renderToString} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import SelectCheckbox from './SelectCheckbox.vue'
 
@@ -9,7 +9,7 @@ type Option = {
 }
 
 type SelectCheckboxProps = {
-  modelValue: Array<string | number>
+  modelValue?: Array<string | number>
   options?: Option[]
   emptyOptionLabel?: string
   label?: string
@@ -38,6 +38,18 @@ const options: Option[] = [
 ]
 
 describe('MalioSelectCheckbox', () => {
+  it('rend sans planter quand modelValue n’est pas fourni (non contrôlé)', () => {
+    expect(() =>
+      mount(SelectCheckboxForTest, {props: {label: 'Catégories', options}}),
+    ).not.toThrow()
+  })
+
+  it('rend en SSR sans planter quand modelValue est absent (cause du crash playground)', async () => {
+    await expect(
+      renderToString(SelectCheckboxForTest, {props: {label: 'Catégories', readonly: true, options}}),
+    ).resolves.toBeTruthy()
+  })
+
   it('renders checkbox inputs for options', async () => {
     const wrapper = mount(SelectCheckboxForTest, {
       props: {modelValue: [], options},
diff --git a/app/components/malio/select/SelectCheckbox.vue b/app/components/malio/select/SelectCheckbox.vue
index 1cc0f78..a0f8364 100644
--- a/app/components/malio/select/SelectCheckbox.vue
+++ b/app/components/malio/select/SelectCheckbox.vue
@@ -244,7 +244,7 @@ type Option = {
   value: string | number
 }
 const props = withDefaults(defineProps<{
-  modelValue: Array<string | number>
+  modelValue?: Array<string | number>
   options?: Option[]
   emptyOptionLabel?: string
   label?: string
@@ -264,6 +264,7 @@ const props = withDefaults(defineProps<{
   noOptionsText?: string
   required?: boolean
 }>(), {
+  modelValue: () => [],
   options: () => [],
   emptyOptionLabel: '',
   label: '',