feat: select improvements

Author: yoannfleurydev

app/components/ui/select.stories.tsx

@@ -111,12 +111,17 @@ export const AllowCustomValue = () => {
   const [bear, setBear] = useState<Bear | null>(null);
 
   return (
-    <Select
-      allowCustomValue
-      options={astrobears}
-      value={bear}
-      onChange={(v) => setBear(v)}
-    />
+    <div className="flex flex-col gap-2">
+      <Select
+        allowCustomValue
+        options={astrobears}
+        value={bear}
+        onChange={(v) => setBear(v)}
+      />
+      <div className="text-sm">
+        Selected value: <pre>{JSON.stringify(bear)}</pre>
+      </div>
+    </div>
   );
 };
 
@@ -174,27 +179,16 @@ export const IsError = () => {
   return (
     <Select
       options={astrobears}
-      invalid
+      inputProps={{ 'aria-invalid': true }}
       value={bear}
       onChange={(v) => setBear(v)}
     />
   );
 };
 
-export const Creatable = () => {
+export const Customization = () => {
   const [bear, setBear] = useState<Bear | null>(null);
 
-  return (
-    <Select
-      options={astrobears}
-      allowCustomValue
-      value={bear}
-      onChange={(v) => setBear(v)}
-    />
-  );
-};
-
-export const Customization = () => {
   return (
     <Select
       options={astrobears}
@@ -211,20 +205,26 @@ export const Customization = () => {
         ),
         inputClassName: cn('data-[state=open]:bg-[#C0FFEE]'),
       }}
+      value={bear}
+      onChange={(v) => setBear(v)}
       renderEmpty={(search) => (
-        <div className="bg-negative-100">
-          This is empty and your search is {search}
+        <div className="flex h-20 items-center justify-center text-sm text-muted-foreground">
+          This is empty and your search is "{search}"
         </div>
       )}
     />
   );
 };
 
-const lotsOfOptions = Array.from({ length: 100_000 }, () => ({
+const lotsOfOptions = Array.from({ length: 1_000 }, () => ({
   label: `${faker.person.firstName()} ${faker.person.lastName()}`,
   id: window.crypto.randomUUID(),
 }));
 
 export const LotsOfOptions = () => {
-  return <Select options={lotsOfOptions} />;
+  const [bear, setBear] = useState<Bear | null>(null);
+
+  return (
+    <Select options={lotsOfOptions} value={bear} onChange={(v) => setBear(v)} />
+  );
 };

app/components/ui/select.tsx

@@ -41,7 +41,7 @@ export const Select = <TValue extends TValueBase>({
   withClearButton,
   inputProps,
   size,
-  placeholder = 'Select...', // TODO Translation
+  placeholder = 'Select...', // TODO)) Translation
   options,
   renderEmpty,
   renderOption,
@@ -69,6 +69,14 @@ export const Select = <TValue extends TValueBase>({
     onChange?.(value);
   };
 
+  /**
+   * On close, reset the search and items so they are back to the original state
+   */
+  const handleOnClose = () => {
+    setSearch('');
+    setItems(options);
+  };
+
   const ui = getUiState((set) => {
     if (items.length === 0 && allowCustomValue && search.length > 0) {
       return set('create-search', { search });
@@ -98,7 +106,7 @@ export const Select = <TValue extends TValueBase>({
       immediate
       value={value ?? null}
       onChange={(v) => handleOnValueChange(v)}
-      onClose={() => setSearch('')}
+      onClose={handleOnClose}
       {...props}
     >
       <div className="relative">
@@ -142,7 +150,7 @@ export const Select = <TValue extends TValueBase>({
           className="absolute z-10 mt-1 w-(--input-width) overflow-auto rounded-md bg-white p-1 shadow empty:invisible dark:bg-neutral-900"
         >
           {ui
-            .match('empty', () => <div className="p-4">No results found</div>)
+            .match('empty', () => <div className="p-4">No results found</div>) // TODO)) Translation
             .match('empty-override', ({ renderEmpty }) => renderEmpty(search))
             .match('create-search', ({ search }) => (
               <ComboboxOption value={{ id: search, label: search }}>
@@ -154,13 +162,13 @@ export const Select = <TValue extends TValueBase>({
             )
             .match('default', () =>
               items.map((item) => (
-                <HeadlessComboboxOption
+                <ComboboxOption
                   key={item.id}
                   value={item}
                   disabled={item.disabled}
                 >
                   {item.label}
-                </HeadlessComboboxOption>
+                </ComboboxOption>
               ))
             )
             .exhaustive()}