fix(ministry): timer keyboard issue on mobile

src/components/textfield/index.tsx

@@ -164,9 +164,9 @@ const TextField = (props: TextFieldTypeProps) => {
             >
               {startIcon}
             </InputAdornment>
-          ) : (
+          ) : slotProps?.input ? (
             slotProps?.input['startAdornment']
-          ),
+          ) : null,
           endAdornment: endIconLocal ? (
             <InputAdornment
               position="end"
@@ -191,9 +191,9 @@ const TextField = (props: TextFieldTypeProps) => {
                 </IconButton>
               )}
             </InputAdornment>
-          ) : (
+          ) : slotProps?.input ? (
             slotProps?.input['endAdornment']
-          ),
+          ) : null,
         },
         formHelperText: {
           component: 'div',

src/components/time_picker_slider/TimeUnit.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useRef } from 'react';
+import { Box, IconButton } from '@mui/material';
+import { TimeUnitProps } from './index.types';
+import {
+  ActiveCaseFilter,
+  CaseContainerStyle,
+  DefaultCaseFilter,
+  TimePickerArrowStyle,
+  TimePickerSelectorStyle,
+} from './index.styles';
+import { useGestureControl } from './useGestureControl';
+import { KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
+import Typography from '@components/typography';
+
+const TimeUnit = ({
+  nextValue,
+  onDecrement,
+  onIncrement,
+  prevValue,
+  value,
+}: TimeUnitProps) => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  const { handleWheel, handleTouchStart, handleTouchMove, handleTouchEnd } =
+    useGestureControl({
+      onIncrement,
+      onDecrement,
+    });
+
+  useEffect(() => {
+    const element = scrollContainerRef.current;
+    if (element) {
+      // Wheel events
+      element.addEventListener('wheel', handleWheel, { passive: false });
+
+      // Touch events
+      element.addEventListener('touchstart', handleTouchStart, {
+        passive: false,
+      });
+
+      element.addEventListener('touchmove', handleTouchMove, {
+        passive: false,
+      });
+
+      element.addEventListener('touchend', handleTouchEnd);
+
+      element.addEventListener('touchcancel', handleTouchEnd);
+
+      return () => {
+        element.removeEventListener('wheel', handleWheel);
+        element.removeEventListener('touchstart', handleTouchStart);
+        element.removeEventListener('touchmove', handleTouchMove);
+        element.removeEventListener('touchend', handleTouchEnd);
+        element.removeEventListener('touchcancel', handleTouchEnd);
+      };
+    }
+  }, [handleWheel, handleTouchStart, handleTouchMove, handleTouchEnd]);
+
+  return (
+    <Box sx={TimePickerSelectorStyle}>
+      <IconButton onClick={onDecrement} style={TimePickerArrowStyle}>
+        <KeyboardArrowUp />
+      </IconButton>
+
+      <div ref={scrollContainerRef} style={CaseContainerStyle}>
+        <Box sx={DefaultCaseFilter}>
+          <Typography className="h3" color="var(--grey-200)">
+            {prevValue}
+          </Typography>
+        </Box>
+        <Box sx={ActiveCaseFilter}>
+          <Typography className="h3" color="var(--accent-main)">
+            {value}
+          </Typography>
+        </Box>
+
+        <Box sx={DefaultCaseFilter}>
+          <Typography className="h3" color="var(--grey-200)">
+            {nextValue}
+          </Typography>
+        </Box>
+      </div>
+
+      <IconButton onClick={onIncrement} style={TimePickerArrowStyle}>
+        <KeyboardArrowDown />
+      </IconButton>
+    </Box>
+  );
+};
+
+export default TimeUnit;

src/components/time_picker_slider/index.styles.ts

@@ -12,49 +12,32 @@ export const TimePickerTypography: SxProps<Theme> = {
   userSelect: 'none',
 };
 
-export const ActiveCaseFilter: SxProps<Theme> = {
-  position: 'absolute',
-  pointerEvents: 'none',
-  backgroundColor: 'var(--accent-150)',
-  borderRadius: 'var(--radius-s)',
+export const DefaultCaseFilter: SxProps<Theme> = {
   height: CASE_SIZE,
-  width: CASE_SIZE,
-  top: '50%',
-  transform: 'translateY(-50%)',
-  left: 0,
-  right: 0,
-};
-
-export const TimePickerCaseStyle: SxProps<Theme> = {
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center',
-  height: CASE_SIZE,
-  width: CASE_SIZE,
-  flexShrink: 0,
-  scrollSnapAlign: 'center',
+  padding: '8px',
+};
+
+export const ActiveCaseFilter: SxProps<Theme> = {
+  ...DefaultCaseFilter,
+  backgroundColor: 'var(--accent-150)',
+  borderRadius: 'var(--radius-s)',
 };
 
 export const CaseContainerStyle: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'flex-start',
-  overflowY: 'scroll',
-  zIndex: 1,
-  scrollSnapType: 'y mandatory',
-  maxHeight: CASE_SIZE * 3,
-  scrollbarWidth: 'none',
-  msOverflowStyle: 'none',
-  position: 'relative',
+  alignItems: 'center',
   userSelect: 'none',
+  touchAction: 'none',
+  cursor: 'ns-resize',
 };
 
 export const TimePickerContainerStyle: SxProps<Theme> = {
   display: 'flex',
   alignItems: 'center',
-  '*::-webkit-scrollbar': {
-    display: 'none',
-  },
+  justifyContent: 'center',
 };
 
 export const TimePickerArrowStyle: CSSProperties = {
@@ -70,5 +53,6 @@ export const TimePickerSelectorStyle: SxProps<Theme> = {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  position: 'relative',
+  justifyContent: 'center',
+  scrollBehavior: 'smooth',
 };