Fix Android Keyboard display issue

components/Selects/select-cost-center.jsx

@@ -53,7 +53,7 @@ export function CostCenterSelect(props) {
         inputSearchStyle={styles.inputSearchStyle}
         iconStyle={styles.iconStyle}
         
-        maxHeight={300}
+        maxHeight={200}
         labelField="label"
         valueField="value"
         placeholder={!isFocus ? t("selectcostcenter.labels.placeholder") : t("selectcostcenter.labels.selectedplaceholder")}
@@ -82,7 +82,7 @@ const styles = StyleSheet.create({
     alignContent: "center",
   },
   dropdown: {
-    height: 48,
+    height: 50,
     borderColor: "gray",
     borderWidth: 0.5,
     borderRadius: 4,
@@ -101,10 +101,10 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
   placeholderStyle: {
-    fontSize: 16,
+    fontSize: 14,
   },
   selectedTextStyle: {
-    fontSize: 16,
+    fontSize: 14,
   },
   iconStyle: {
     width: 20,
@@ -112,6 +112,6 @@ const styles = StyleSheet.create({
   },
   inputSearchStyle: {
     height: 40,
-    fontSize: 16,
+    fontSize: 14,
   },
 });

components/Selects/select-job-id.jsx

@@ -94,6 +94,7 @@ export function JobIdSearchSelect(
   }, [data, idData]);
 
   useEffect(() => {
+    if (typeof theOptions !== "undefined") {
       //  console.log("useEfectDependentOn: [theOptions]");
       var count = Object.keys(theOptions).length;
       // console.log("useEfectDependentOn: [theOptions] count:", count);
@@ -101,14 +102,19 @@ export function JobIdSearchSelect(
       for (let i = 0; i < count; i++) {
         selectDataArray.push({
           value: theOptions[i].id,
-        label: `${clm_no && theOptions[i].clm_no ? `${theOptions[i].clm_no} | ` : ""}${
+          label: `${
+            clm_no && theOptions[i].clm_no ? `${theOptions[i].clm_no} | ` : ""
+          }${
             theOptions[i].ro_number || t("general.labels.na")
-          } | ${OwnerNameDisplayFunction(theOptions[i])} | ${theOptions[i].v_model_yr || ""} ${theOptions[i].v_make_desc || ""} ${
+          } | ${OwnerNameDisplayFunction(theOptions[i])} | ${
+            theOptions[i].v_model_yr || ""
+          } ${theOptions[i].v_make_desc || ""} ${
             theOptions[i].v_model_desc || ""
           }`,
         });
       }
       setSelectorData(selectDataArray);
+    }
   }, [theOptions]);
 
   //   useEffect(() => {
@@ -128,7 +134,7 @@ export function JobIdSearchSelect(
         inputSearchStyle={styles.inputSearchStyle}
         iconStyle={styles.iconStyle}
         search
-        maxHeight={300}
+        maxHeight={200}
         labelField="label"
         valueField="value"
         placeholder={!isFocus ? t("selectjobid.labels.placeholder") : t("selectjobid.labels.selectedplaceholder")}
@@ -137,7 +143,14 @@ export function JobIdSearchSelect(
         onBlur={() => setIsFocus(false)}
         data={selectorData}
         value={props.currentValue?.value} //{selectedvalue}
-        onChange={(item) => props.onJobSelected(item)}//TODO: add setIsFocus(false); to this
+        onChange={(item) => {
+          // console.log("onChange Fired!!!!");
+          props.onJobSelected(item);
+          setIsFocus(false);
+        }} 
+        
+        
+        //TODO: add setIsFocus(false); to this
         //     {
         //     console.log("onValueSelected!!!!");
         //    // (item) => {onJobSelected(item.value)};
@@ -198,10 +211,10 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
   placeholderStyle: {
-    fontSize: 16,
+    fontSize: 14,
   },
   selectedTextStyle: {
-    fontSize: 16,
+    fontSize: 14,
   },
   iconStyle: {
     width: 20,
@@ -209,6 +222,6 @@ const styles = StyleSheet.create({
   },
   inputSearchStyle: {
     height: 40,
-    fontSize: 16,
+    fontSize: 14,
   },
 });

components/keyboards/KeyboardAvoidingComponent.js

@@ -0,0 +1,31 @@
+import { View, Text, Platform } from "react-native";
+import React from "react";
+import { KeyboardAvoidingView } from "react-native";
+import { StyleSheet } from "react-native";
+import { TouchableWithoutFeedback } from "react-native";
+import { Keyboard } from "react-native";
+
+const KeyboardAvoidingComponent = ({ children }) => {
+  return (
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === "ios" ? "padding":"height" }
+      style={styles.container}
+    >
+      {/* <TouchableWithoutFeedback onPress={Keyboard.dismiss}> */}
+        <View style={styles.inner}>{children}</View>
+      {/* </TouchableWithoutFeedback> */}
+    </KeyboardAvoidingView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  inner: {
+    flex: 1,
+  },
+});
+
+export default KeyboardAvoidingComponent;

components/screen-time-ticket-browser/screen-time-ticket-browser.component.jsx

@@ -50,6 +50,8 @@ import ClockedinListItem from "../time-ticket-items/clockedin-list-item.componen
 import SignOutButton from "../Buttons/employee-sign-out-button.component";
 import AddTimeTicketButton from "../Buttons/create-time-ticket-button.component";
 
+import KeyboardAvoidingComponent from "../keyboards/KeyboardAvoidingComponent";
+
 const mapStateToProps = createStructuredSelector({
   currentEmployee: selectCurrentEmployee,
   loaderGettingRates: selectGettingRates,
@@ -198,6 +200,7 @@ export function ScreenTimeTicketBrowser({
 
   return (
     <View style={styles.cardBackground}>
+      <KeyboardAvoidingComponent>
         <FlatList
           ListHeaderComponent={
             <Card style={localStyles.localCardStyle}>
@@ -267,6 +270,7 @@ export function ScreenTimeTicketBrowser({
             <RefreshControl refreshing={loading} onRefresh={onRefresh} />
           }
         />
+      </KeyboardAvoidingComponent>
     </View>
   );
 }