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,21 +94,27 @@ export function JobIdSearchSelect(
   }, [data, idData]);
 
   useEffect(() => {
-    // console.log("useEfectDependentOn: [theOptions]");
+    if (typeof theOptions !== "undefined") {
-    var count = Object.keys(theOptions).length;
+      //  console.log("useEfectDependentOn: [theOptions]");
-    // console.log("useEfectDependentOn: [theOptions] count:", count);
+      var count = Object.keys(theOptions).length;
-    let selectDataArray = [];
+      // console.log("useEfectDependentOn: [theOptions] count:", count);
-    for (let i = 0; i < count; i++) {
+      let selectDataArray = [];
-      selectDataArray.push({
+      for (let i = 0; i < count; i++) {
-        value: theOptions[i].id,
+        selectDataArray.push({
-        label: `${clm_no && theOptions[i].clm_no ? `${theOptions[i].clm_no} | ` : ""}${
+          value: theOptions[i].id,
+          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);
     }
-    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,75 +200,77 @@ export function ScreenTimeTicketBrowser({
 
   return (
     <View style={styles.cardBackground}>
-      <FlatList
+      <KeyboardAvoidingComponent>
-        ListHeaderComponent={
+        <FlatList
-          <Card style={localStyles.localCardStyle}>
+          ListHeaderComponent={
-            <Card.Title
+            <Card style={localStyles.localCardStyle}>
-              title={t("timeticketbrowser.labels.loggedinemployee")}
+              <Card.Title
-              //  right={(props) => <SignOutButton />}
+                title={t("timeticketbrowser.labels.loggedinemployee")}
-            />
+                //  right={(props) => <SignOutButton />}
-            <Card.Content>
-              {currentEmployeeFullName && (
-                <Subheading>{currentEmployeeFullName}</Subheading>
-              )}
-            </Card.Content>
-          </Card>
-        }
-        data={!!itemState ? [itemState] : null}
-        renderItem={({ item }) => (
-          <MyItem style={localStyles.localCardStyle} itemState={item} />
-        )}
-        ListFooterComponent={
-          <Card style={localStyles.localCardStyle}>
-            <Card.Title
-              title={t("timeticketbrowser.labels.clockintojob")}
-              //     right={(props) =>
-              //     <View style={{ flexDirection:"row" }} ><AddTimeTicketButton />
-              //     <Button mode="outlined"
-              // compact={true} loading={loading} onPress={handleFinish}
-              // style={{margin:4}}
-              // >
-              //       <Text>Clock In</Text>
-              //     </Button></View>
-              //     }
-            />
-            <Card.Content>
-              <JobIdSearchSelect
-                currentValue={currentSJobId}
-                onJobSelected={setCurrentSJobId}
-                convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
-                notExported={!currentBodyshop.tt_allow_post_to_invoiced}
-                notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
               />
-              <CostCenterSelect
+              <Card.Content>
-                currentValue={currentSCC}
+                {currentEmployeeFullName && (
-                currentRatesNCostCenters={currentRatesNCostCenters}
+                  <Subheading>{currentEmployeeFullName}</Subheading>
-                onValueSelected={setCurrentSCC}
+                )}
+              </Card.Content>
+            </Card>
+          }
+          data={!!itemState ? [itemState] : null}
+          renderItem={({ item }) => (
+            <MyItem style={localStyles.localCardStyle} itemState={item} />
+          )}
+          ListFooterComponent={
+            <Card style={localStyles.localCardStyle}>
+              <Card.Title
+                title={t("timeticketbrowser.labels.clockintojob")}
+                //     right={(props) =>
+                //     <View style={{ flexDirection:"row" }} ><AddTimeTicketButton />
+                //     <Button mode="outlined"
+                // compact={true} loading={loading} onPress={handleFinish}
+                // style={{margin:4}}
+                // >
+                //       <Text>Clock In</Text>
+                //     </Button></View>
+                //     }
               />
-              {error && error?.message ? (
+              <Card.Content>
-                <ErrorDisplay errorMessage={error.message} />
+                <JobIdSearchSelect
-              ) : null}
+                  currentValue={currentSJobId}
-            </Card.Content>
+                  onJobSelected={setCurrentSJobId}
-            <Card.Actions
+                  convertedOnly={!currentBodyshop.tt_allow_post_to_invoiced}
-              style={{
+                  notExported={!currentBodyshop.tt_allow_post_to_invoiced}
-                justifyContent: "center",
+                  notInvoiced={!currentBodyshop.tt_allow_post_to_invoiced}
-              }}
+                />
-            >
+                <CostCenterSelect
-              <Button
+                  currentValue={currentSCC}
-                mode="outlined"
+                  currentRatesNCostCenters={currentRatesNCostCenters}
-                style={styles.buttonBasicOutlined}
+                  onValueSelected={setCurrentSCC}
-                loading={loadingClockIn}
+                />
-                onPress={handleFinish}
+                {error && error?.message ? (
+                  <ErrorDisplay errorMessage={error.message} />
+                ) : null}
+              </Card.Content>
+              <Card.Actions
+                style={{
+                  justifyContent: "center",
+                }}
               >
-                <Text>{t("timeticketbrowser.actions.clockin")}</Text>
+                <Button
-              </Button>
+                  mode="outlined"
-            </Card.Actions>
+                  style={styles.buttonBasicOutlined}
-          </Card>
+                  loading={loadingClockIn}
-        }
+                  onPress={handleFinish}
-        refreshControl={
+                >
-          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+                  <Text>{t("timeticketbrowser.actions.clockin")}</Text>
-        }
+                </Button>
-      />
+              </Card.Actions>
+            </Card>
+          }
+          refreshControl={
+            <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+          }
+        />
+      </KeyboardAvoidingComponent>
     </View>
   );
 }