From 34bd6e417cc123ea07cb2a1c6f0f7639c9ea6669 Mon Sep 17 00:00:00 2001
From: Pierantonio Zocchi <pierantonio.zocchi@gmail.com>
Date: Tue, 27 Jan 2026 14:48:39 +0100
Subject: [PATCH] Fix rendering of multiple values in RLSelect

---
 package-lock.json                    |  4 ++--
 package.json                         |  2 +-
 src/components/RLSelect/RLSelect.tsx | 28 ++++++++++++++++++++++++++--
 vite.config.ts                       |  6 ++++--
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index aa8d264..9369c42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@skillbill/reactlace",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@skillbill/reactlace",
-      "version": "1.0.0",
+      "version": "1.0.1",
       "license": "MIT",
       "devDependencies": {
         "@chromatic-com/storybook": "^4.1.3",
diff --git a/package.json b/package.json
index 6caeb8d..906fd9b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@skillbill/reactlace",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "author": "skillbill",
   "license": "MIT",
diff --git a/src/components/RLSelect/RLSelect.tsx b/src/components/RLSelect/RLSelect.tsx
index babc43c..484e354 100644
--- a/src/components/RLSelect/RLSelect.tsx
+++ b/src/components/RLSelect/RLSelect.tsx
@@ -1,4 +1,11 @@
-import { forwardRef, useImperativeHandle, useCallback, useEffect, useMemo } from 'react'
+import {
+  forwardRef,
+  useImperativeHandle,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef
+} from 'react'
 import SlSelect from '@shoelace-style/shoelace/dist/react/select/index.js'
 import SlOption from '@shoelace-style/shoelace/dist/react/option/index.js'
 import type SlSelectElement from '@shoelace-style/shoelace/dist/components/select/select.js'
@@ -47,6 +54,7 @@ export const RLSelect = forwardRef<RLSelectRef, RLSelectProps>(
     ref
   ) => {
     const { errorMessage, isValid, validate } = useValidation({ rules, externalError: error })
+    const selectRef = useRef<SlSelectElement>(null)
 
     // Build dictionary for space handling
     const optionsDict = useMemo(() => {
@@ -62,8 +70,11 @@ export const RLSelect = forwardRef<RLSelectRef, RLSelectProps>(
       if (Array.isArray(value)) {
         return value.map((s) => `${s}`.replaceAll(' ', '_'))
       }
+      if (multiple) {
+        return value ? [`${value}`.replaceAll(' ', '_')] : []
+      }
       return value ? `${value}`.replaceAll(' ', '_') : ''
-    }, [value])
+    }, [value, multiple])
 
     useEffect(() => {
       if (value !== undefined) {
@@ -71,6 +82,18 @@ export const RLSelect = forwardRef<RLSelectRef, RLSelectProps>(
       }
     }, [value, validate])
 
+    // Sync value to SlSelect after options are rendered (fixes production build timing issue)
+    useEffect(() => {
+      if (selectRef.current && options.length > 0) {
+        // Use requestAnimationFrame to ensure DOM is ready
+        requestAnimationFrame(() => {
+          if (selectRef.current) {
+            selectRef.current.value = templateValue
+          }
+        })
+      }
+    }, [templateValue, options])
+
     useImperativeHandle(ref, () => ({
       isValid: () => isValid,
       validate: () => validate(value)
@@ -173,6 +196,7 @@ export const RLSelect = forwardRef<RLSelectRef, RLSelectProps>(
     return (
       <div className={`relative ${className ?? ''}`}>
         <SlSelect
+          ref={selectRef}
           className={combinedClassName}
           hoist={hoist}
           value={templateValue}
diff --git a/vite.config.ts b/vite.config.ts
index bc2542b..f5bd498 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -24,13 +24,15 @@ export default defineConfig({
       fileName: 'reactlace'
     },
     rollupOptions: {
-      external: ['react', 'react-dom'],
+      external: (id) => id === 'react' || id === 'react-dom' || id.startsWith('react/') || id.startsWith('react-dom/'),
       output: {
         assetFileNames: (assetInfo) =>
           assetInfo.name?.endsWith('.css') ? 'styles/[name][extname]' : 'assets/[name][extname]',
         globals: {
           react: 'React',
-          'react-dom': 'ReactDOM'
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'React',
+          'react/jsx-dev-runtime': 'React'
         }
       }
     },