Merge pull request #774 from topcoder-platform/issue-771

onboading issues: Mobile UI issues + dropdown issues

Author: jmgasper

src/apps/onboarding/src/components/modal-add-work/index.tsx

@@ -172,7 +172,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
                         dirty
                     />
                 </div>
-                <div className='d-flex gap-16 full-width'>
+                <div className='d-flex gap-16 full-width flex-wrap'>
                     <div
                         className='flex-1'
                     >

src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx

@@ -106,7 +106,14 @@ const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps)
             <DatePicker
                 renderCustomHeader={renderCustomHeader}
                 selected={props.date}
-                onChange={props.onChange}
+                onChange={(
+                    date: Date | null,
+                    event: React.SyntheticEvent<any> | undefined,
+                ) => {
+                    event?.stopPropagation()
+                    event?.preventDefault()
+                    props.onChange?.(date)
+                }}
                 placeholderText={props.placeholder || 'Select a date'}
                 className={styles.datePickerWrapper}
                 minDate={props.minDate}

src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx

@@ -2,6 +2,7 @@ import {
     ChangeEvent,
     Dispatch,
     FC,
+    MouseEvent,
     MutableRefObject,
     ReactNode,
     SetStateAction,
@@ -49,7 +50,12 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
 
     const toggleMenu: () => void = () => setMenuIsVisible(wasVisible => !wasVisible)
 
-    const select: (option: InputSelectOption) => () => void = (option: InputSelectOption) => () => {
+    const select: (option: InputSelectOption) => (event: MouseEvent<HTMLDivElement>) => void
+    = (option: InputSelectOption) => (
+        event: MouseEvent<HTMLDivElement>,
+    ) => {
+        event.stopPropagation()
+        event.preventDefault()
         props.onChange({
             target: { value: option.value },
         } as unknown as ChangeEvent<HTMLInputElement>)