Merge pull request #162 from lambda-curry/fix/add-type-prop-to-select

Author: lcmohsen

apps/docs/src/remix-hook-form/select.stories.tsx

@@ -1,5 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import * as React from 'react';
 import { CanadaProvinceSelect, Select, USStateSelect } from '@lambdacurry/forms/remix-hook-form';
+import { Select as UISelect } from '@lambdacurry/forms/ui/select';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { CANADA_PROVINCES } from '@lambdacurry/forms/ui/data/canada-provinces';
 import { US_STATES } from '@lambdacurry/forms/ui/data/us-states';
@@ -630,3 +632,62 @@ export const CreatableOption: Story = {
     });
   },
 };
+
+// Story to verify custom input type for search input
+const NumberSearchTypeExample = () => {
+  // Use UI Select directly with number-valued options
+  const numberOptions = [
+    { label: '1', value: 1 },
+    { label: '2', value: 2 },
+    { label: '3', value: 3 },
+    { label: '4', value: 4 },
+    { label: '5', value: 5 },
+    { label: '6', value: 6 },
+    { label: '7', value: 7 },
+    { label: '8', value: 8 },
+    { label: '9', value: 9 },
+    { label: '10', value: 10 },
+    { label: '11', value: 11 },
+    { label: '12', value: 12 },
+    { label: '13', value: 13 },
+    { label: '14', value: 14 },
+    { label: '15', value: 15 },
+    { label: '16', value: 16 },
+    { label: '17', value: 17 },
+    { label: '18', value: 18 },
+    { label: '19', value: 19 },
+    { label: '20', value: 20 },
+  ];
+  const [value, setValue] = React.useState<number | undefined>(10);
+  return (
+    <div style={{ width: 320 }}>
+      <UISelect<number>
+        options={numberOptions}
+        placeholder="Pick a number"
+        searchInputProps={{ type: 'number' }}
+        value={value}
+        onValueChange={setValue}
+      />
+    </div>
+  );
+};
+
+export const NumberSearchInputType: Story = {
+  decorators: [
+    // No router needed for this simple UI-only story
+    (StoryFn) => <StoryFn />,
+  ],
+  render: () => <NumberSearchTypeExample />,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Open select and assert input type is number', async () => {
+      // Open the UI select
+      const trigger = await canvas.findByRole('combobox');
+      await userEvent.click(trigger);
+
+      const input = await within(document.body).findByPlaceholderText('Search...');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveAttribute('type', 'number');
+    });
+  },
+};

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambdacurry/forms",
-  "version": "0.22.4",
+  "version": "0.22.5",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

packages/components/src/ui/command.tsx

@@ -30,15 +30,25 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   );
 };
 
-const CommandInput = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>) => (
+type CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+};
+
+const CommandInput = ({ className, type = 'text', ...props }: CommandInputProps) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <CommandPrimitive.Input
-      className={cn(
-        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
-        className,
-      )}
-      {...props}
-    />
+    {/*
+      To override the type of the input, we couldn't apply the type attribute to the CommandPrimitive.Input component b/c it's hardcoded as 'text' in the cmdk library
+      Reference: https://github.com/pacocoursey/cmdk/blob/main/cmdk/src/index.tsx#L816
+     */}
+    <CommandPrimitive.Input asChild {...props}>
+      <input
+        type={type}
+        className={cn(
+          'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+          className,
+        )}
+      />
+    </CommandPrimitive.Input>
   </div>
 );