fix: timepicker scroll issues

affects: @medly-components/core, @medly-components/forms
medly · Jul 20, 2024 · 3aef211 · 3aef211
1 parent 3146db8
commit 3aef211
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 100 deletions.
diff --git a/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx b/packages/core/src/components/TimePicker/TimeOptionList/TimeOptionList.styled.tsx
@@ -13,6 +13,7 @@ export const TimePicker = styled.div`
 `;
 
 export const TimeUList = styled.ul`
+    width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
@@ -24,6 +25,8 @@ export const TimeUList = styled.ul`
     scroll-snap-type: y mandatory;
     user-select: none;
     list-style: none;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 
     &::-webkit-scrollbar {
         display: none;
@@ -43,6 +46,7 @@ const getFontStyle = (style: 'selectedOption' | 'nonSelectedOption') => css`
 
 export const TimeItem = styled('li')<{ isSelected?: boolean }>`
     ${centerAligned()}
+    width: 100%;
     cursor: pointer;
     min-height: 4rem;
     scroll-snap-align: center;

diff --git a/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.styled.tsx b/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.styled.tsx
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import Text from '../../Text';
 
 export const TimePickerCard = styled('div')`
     background: ${({ theme }) => theme.timePicker.bgColor};
@@ -8,6 +7,7 @@ export const TimePickerCard = styled('div')`
     width: max-content;
     height: max-content;
     padding-top: 1.2rem;
+    min-width: 24rem;
 `;
 
 export const TimeLabels = styled('div')`
@@ -58,14 +58,6 @@ export const TimePickerWrapper = styled.div`
     }
 `;
 
-export const Colon = styled(Text).attrs({ children: ':' })`
-    flex: 0.5;
-    display: flex;
-    justify-content: flex-end;
-    user-select: none;
-    z-index: 1;
-`;
-
 export const TimePickerActions = styled.div`
     display: flex;
     flex-direction: row;

diff --git a/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx b/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx
@@ -5,7 +5,7 @@ import Popover from '../../Popover';
 import Popup from '../../Popover/Popup';
 import { TimeOptionList } from '../TimeOptionList';
 import type { TIME_OPTION_TYPE } from '../TimeOptionList/types';
-import { Colon, TimePickerActions, TimePickerCard, TimePickerWrapper } from './TimePickerPopup.styled';
+import { TimePickerActions, TimePickerCard, TimePickerWrapper } from './TimePickerPopup.styled';
 import type { TimePickerPopupProps } from './types';
 
 export const Component: FC<TimePickerPopupProps> = ({ value, onChange, onReset, popoverDistance, popoverPlacement }) => {
@@ -57,7 +57,6 @@ export const Component: FC<TimePickerPopupProps> = ({ value, onChange, onReset,
             <TimePickerCard>
                 <TimePickerWrapper>
                     <TimeOptionList type="HOUR" value={hour} onChange={handleChange} ref={hourRef} />
-                    <Colon />
                     <TimeOptionList type="MINUTES" value={minutes} onChange={handleChange} ref={minutesRef} />
                     <TimeOptionList type="PERIOD" value={period} onChange={handleChange} ref={periodRef} />
                 </TimePickerWrapper>

diff --git a/packages/core/src/components/TimePicker/TimePickerTextField/TimePickerTextField.tsx b/packages/core/src/components/TimePicker/TimePickerTextField/TimePickerTextField.tsx
@@ -43,7 +43,7 @@ const Component: FC<TimePickerTextFieldProps> = memo(
             } else {
                 inputRef?.current?.blur();
                 props?.onBlur?.(event);
-                const length = event.target.value.length;
+                const { length } = event.target.value;
                 const match = event.target.value.replace(/ /g, '').match(/([0-9]{2}):([0-9]{2})$/);
                 // Choose AM as default if user has not entered any value for period
                 if (length >= 7 && match) {
@@ -131,6 +131,7 @@ const Component: FC<TimePickerTextFieldProps> = memo(
                 onKeyPress={onKeyPress}
                 key={key.toString()}
                 maxLength={12}
+                autoComplete="off"
                 pattern={'[0-9]{2} : [0-9]{2}  [AaPp][Mm]'}
                 {...{ ...props, value: text, onBlur, validator, onChange }}
             />