@jobber/components-native 0.67.3 → 0.67.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.67.3",
+  "version": "0.67.4",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -84,5 +84,5 @@
     "react-native-safe-area-context": "^4.5.2",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "d589b2ab8c2f8e23a879f1fd3db475f035721749"
+  "gitHead": "e1c7ea3e923799f684c8cccf4e9f6f245cdf2497"
 }

package/src/InputDate/InputDate.test.tsx

@@ -2,10 +2,13 @@ import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { FormProvider, useForm } from "react-hook-form";
+import { Keyboard } from "react-native";
 import { InputDate } from "./InputDate";
 import { Button } from "../Button";
 import * as atlantisContext from "../AtlantisContext/AtlantisContext";
 
+const keyboardDismissSpy = jest.spyOn(Keyboard, "dismiss");
+
 describe("InputDate", () => {
   describe("Visuals", () => {
     const placeholder = "Start time";
@@ -134,6 +137,11 @@ describe("InputDate", () => {
       fireEvent.press(screen.getByLabelText("Confirm"));
       expect(handleChange).toHaveBeenCalledWith(expect.any(Date));
     });
+
+    it("should dismiss the keyboard when the date picker is opened", () => {
+      renderDatePicker();
+      expect(keyboardDismissSpy).toHaveBeenCalled();
+    });
   });
   const mockOnSubmit = jest.fn();
   const saveButtonText = "Submit";

package/src/InputDate/InputDate.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from "react";
 import DateTimePicker from "react-native-modal-datetime-picker";
-import { Platform } from "react-native";
+import { Keyboard, Platform } from "react-native";
 import { FieldError, UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
 import { Clearable } from "@jobber/hooks";
@@ -204,6 +204,7 @@ function InternalInputDate({
   );
 
   function showDatePicker() {
+    Keyboard.dismiss();
     setShowPicker(true);
   }
 

package/src/InputTime/InputTime.test.tsx

@@ -2,10 +2,12 @@ import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react-native";
 import { Host } from "react-native-portalize";
 import { FormProvider, useForm } from "react-hook-form";
+import { Keyboard } from "react-native";
 import { InputTime } from "./InputTime";
 import * as atlantisContext from "../AtlantisContext/AtlantisContext";
 import { Button } from "../Button";
 
+const keyboardDismissSpy = jest.spyOn(Keyboard, "dismiss");
 afterEach(() => {
   jest.spyOn(atlantisContext, "useAtlantisContext").mockRestore();
 });
@@ -102,6 +104,7 @@ describe("With emptyValueLabel", () => {
   });
 });
 
+// eslint-disable-next-line max-statements
 describe("Time picker", () => {
   const placeholder = "Tap me";
   const handleChange = jest.fn();
@@ -143,6 +146,11 @@ describe("Time picker", () => {
     expect(handleChange).toHaveBeenCalledWith(expect.any(Date));
   });
 
+  it("should dismiss the keyboard when the time picker is opened", () => {
+    renderTimePicker();
+    expect(keyboardDismissSpy).toHaveBeenCalled();
+  });
+
   it("should be a time picker", () => {
     const screen = renderTimePicker();
     expect(screen.getByTestId("inputTime-Picker").props.mode).toBe("time");

package/src/InputTime/InputTime.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react";
 import { FieldError, UseControllerProps } from "react-hook-form";
 import { XOR } from "ts-xor";
 import DateTimePicker from "react-native-modal-datetime-picker";
-import { View } from "react-native";
+import { Keyboard, View } from "react-native";
 import { Clearable } from "@jobber/hooks";
 import { styles } from "./InputTime.style";
 import { getTimeZoneOffsetInMinutes, roundUpToNearestMinutes } from "./utils";
@@ -182,6 +182,7 @@ function InternalInputTime({
   );
 
   function showDatePicker() {
+    Keyboard.dismiss();
     setShowPicker(true);
   }