Fixed TimeInput's keyboard/selection issues (#186)

Co-authored-by: Brandon Wees <[email protected]>
Maroon-Rides · Sep 18, 2024 · b5a9c46 · b5a9c46
1 parent 733f809
commit b5a9c46
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/app/components/sheets/route_planning/InputRoute.tsx b/app/components/sheets/route_planning/InputRoute.tsx
@@ -53,6 +53,8 @@ const InputRoute: React.FC<SheetProps> = ({ sheetRef }) => {
     const addLocationFavorite = addFavoriteLocationMutation();
     const removeLocationFavorite = removeFavoriteLocationMutation();
 
+    const [timeInputFocused, setTimeInputFocused] = useState(false);
+
     function toggleFavoriteLocation(location: SearchSuggestion) {
         if (favoriteLocations && 
             (favoriteLocations as SearchSuggestion[]).find((item) => suggestionEqual(item, location))) 
@@ -63,6 +65,10 @@ const InputRoute: React.FC<SheetProps> = ({ sheetRef }) => {
         }
     }
 
+    function toggleTimeInputFocused(newValue: boolean) {
+        setTimeInputFocused(newValue)
+    }
+
     useEffect(() => {
         setSheetCloseCallback(() => {
             setTimeout(() => {
@@ -122,7 +128,7 @@ const InputRoute: React.FC<SheetProps> = ({ sheetRef }) => {
         >
             <BottomSheetView
                 onTouchStart={() => {
-                    if (!suggestionOutput) Keyboard.dismiss()
+                    if (!suggestionOutput && !timeInputFocused) Keyboard.dismiss()
                 }}
                 style={[!(routeInfoError == "") && {flex: 1}]}
             >
@@ -208,6 +214,7 @@ const InputRoute: React.FC<SheetProps> = ({ sheetRef }) => {
 
                         <TimeInput 
                             onTimeChange={(time) => setTime(time)}
+                            onTimeInputFocused={toggleTimeInputFocused}
                         />
                     </View>
 
@@ -365,4 +372,4 @@ const InputRoute: React.FC<SheetProps> = ({ sheetRef }) => {
     )
 }
 
-export default memo(InputRoute);
+export default memo(InputRoute);
diff --git a/app/components/ui/TimeInput.tsx b/app/components/ui/TimeInput.tsx
@@ -5,9 +5,10 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 
 interface Props {
     onTimeChange: (time: Date) => void;
+    onTimeInputFocused: (newValue: boolean) => void
 }
 
-const TimeInput: React.FC<Props> = ({ onTimeChange }) => {
+const TimeInput: React.FC<Props> = ({ onTimeChange, onTimeInputFocused }) => {
     const [time, setTime] = useState('')
     const [meridiem, setMeridiem] = useState('AM')
     const [isFocused, setIsFocused] = useState(false)
@@ -87,9 +88,14 @@ const TimeInput: React.FC<Props> = ({ onTimeChange }) => {
             <TextInput
                 ref={textInputRef}
                 value={time}
-                onFocus={() => setIsFocused(true)}
-                onBlur={() => setIsFocused(false)}
-                selection={{ start: time.length, end: time.length }}
+                onFocus={() => {
+                    setIsFocused(true)
+                    onTimeInputFocused(true)
+                }}
+                onBlur={() => {
+                    setIsFocused(false)
+                    onTimeInputFocused(false)
+                }}
                 style={{
                     color: theme.text,
                     fontWeight: 'bold',