fix: date picker mobile custom input (#569)

opengovsg · Nov 23, 2023 · 2fff232 · 2fff232
1 parent 55bb738
commit 2fff232
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/react/src/DatePicker/DatePicker.stories.tsx b/react/src/DatePicker/DatePicker.stories.tsx
@@ -78,7 +78,7 @@ const CustomInputButton = forwardRef<object, 'button'>((_props, ref) => {
   const refs = useMergeRefs(inputRef, innerRef, ref)
 
   return (
-    <Button ref={refs} onClick={onOpen}>
+    <Button ref={refs} onClick={onOpen} maxWidth="full">
       please look at source code to see how to use custom elements
     </Button>
   )
@@ -88,3 +88,9 @@ export const CustomInput = Template.bind({})
 CustomInput.args = {
   inputElement: <CustomInputButton />,
 }
+
+export const MobileCustomInput = Template.bind({})
+MobileCustomInput.args = {
+  inputElement: <CustomInputButton />,
+}
+MobileCustomInput.parameters = getMobileViewParameters()
diff --git a/react/src/DatePicker/components/DatePickerWrapper.tsx b/react/src/DatePicker/components/DatePickerWrapper.tsx
@@ -21,7 +21,7 @@ export const DatePickerWrapper = ({ children }: PropsWithChildren) => {
   if (isMobile) {
     return (
       <Flex>
-        <DatePickerInput />
+        {inputToRender}
         {children}
       </Flex>
     )