Merge pull request #749 from gparlakov/docs-update-select-controlled-example-to-use-ids

chore: update select controlled example

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx

@@ -2,27 +2,33 @@ import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
 import { Select } from '@qwik-ui/headless';
 export default component$(() => {
   useStyles$(styles);
-  const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
-  const selected = useSignal<string>('Ryan');
+  const users = [
+    { id: '0', name: 'Tim' },
+    { id: '1', name: 'Ryan' }, // 👈 start with Ryan
+    { id: '2', name: 'Jim' },
+    { id: '3', name: 'Jessie' },
+    { id: '4', name: 'Abby' },
+  ];
+  const selectedId = useSignal<string>('1');
 
   return (
     <>
-      <Select.Root bind:value={selected} class="select">
+      <Select.Root bind:value={selectedId} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
           <Select.DisplayText placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
-            {users.map((user, index) => (
-              <Select.Item value={index.toString()} key={user}>
-                <Select.ItemLabel>{user}</Select.ItemLabel>
+            {users.map((user) => (
+              <Select.Item value={user.id} key={user.id}>
+                <Select.ItemLabel>{user.name}</Select.ItemLabel>
               </Select.Item>
             ))}
           </Select.Listbox>
         </Select.Popover>
       </Select.Root>
-      <button onClick$={$(() => (selected.value = '4'))}>Change to Abby</button>
+      <button onClick$={$(() => (selectedId.value = '4'))}>Change to Abby</button>
     </>
   );
 });