Mobile -useKeyboardOffset: Update hook to use a setTiemout to remove the keyboard offset, it also updates the unit test

Gerardo · Gerardo · commit 85bd85a8f918 · 2023-04-03T17:13:47.000+02:00
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/test/use-keyboard-offset.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/test/use-keyboard-offset.native.js
@@ -10,6 +10,8 @@ import RCTDeviceEventEmitter from 'react-native/Libraries/EventEmitter/RCTDevice
  */
 import useKeyboardOffset from '../use-keyboard-offset';
 
+jest.useFakeTimers();
+
 describe( 'useKeyboardOffset', () => {
 	beforeEach( () => {
 		Keyboard.removeAllListeners( 'keyboardDidShow' );
@@ -43,7 +45,10 @@ describe( 'useKeyboardOffset', () => {
 
 	it( 'updates keyboard visibility and offset when the keyboard is hidden', () => {
 		// Arrange
-		const { result } = renderHook( () => useKeyboardOffset( true ) );
+		const shouldPreventAutomaticScroll = jest.fn().mockReturnValue( false );
+		const { result } = renderHook( () =>
+			useKeyboardOffset( true, shouldPreventAutomaticScroll )
+		);
 
 		// Act
 		act( () => {
@@ -54,6 +59,7 @@ describe( 'useKeyboardOffset', () => {
 
 		act( () => {
 			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
 		} );
 
 		// Assert
@@ -114,4 +120,105 @@ describe( 'useKeyboardOffset', () => {
 			1
 		);
 	} );
+
+	it( 'sets keyboard offset to 0 when keyboard is hidden and shouldPreventAutomaticScroll is false', () => {
+		// Arrange
+		const shouldPreventAutomaticScroll = jest.fn().mockReturnValue( false );
+		const { result } = renderHook( () =>
+			useKeyboardOffset( true, shouldPreventAutomaticScroll )
+		);
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 0 );
+	} );
+
+	it( 'does not set keyboard offset to 0 when keyboard is hidden and shouldPreventAutomaticScroll is true', () => {
+		// Arrange
+		const shouldPreventAutomaticScroll = jest.fn().mockReturnValue( true );
+		const { result } = renderHook( () =>
+			useKeyboardOffset( true, shouldPreventAutomaticScroll )
+		);
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 250 );
+	} );
+
+	it( 'handles updates to shouldPreventAutomaticScroll', () => {
+		// Arrange
+		const preventScrollTrue = jest.fn( () => true );
+		const preventScrollFalse = jest.fn( () => false );
+
+		// Act
+		const { result, rerender } = renderHook(
+			( { shouldPreventAutomaticScroll } ) =>
+				useKeyboardOffset( true, shouldPreventAutomaticScroll ),
+			{
+				initialProps: {
+					shouldPreventAutomaticScroll: preventScrollFalse,
+				},
+			}
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 0 );
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 250 );
+
+		// Act
+		act( () => {
+			rerender( { shouldPreventAutomaticScroll: preventScrollTrue } );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 250 );
+
+		// Act
+		act( () => {
+			rerender( { shouldPreventAutomaticScroll: preventScrollFalse } );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 250 );
+	} );
 } );
diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/use-keyboard-offset.native.js b/packages/components/src/mobile/keyboard-aware-flat-list/use-keyboard-offset.native.js
@@ -7,26 +7,42 @@ import { Keyboard } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { useEffect, useCallback, useState } from '@wordpress/element';
+import { useEffect, useCallback, useState, useRef } from '@wordpress/element';
 
 /**
  * Hook that adds Keyboard listeners to get the offset space
  * when the keyboard is opened, taking into account focused AztecViews.
  *
- * @param {boolean} scrollEnabled Whether the scroll is enabled or not.
+ * @param {boolean}  scrollEnabled                Whether the scroll is enabled or not.
+ * @param {Function} shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
  * @return {[number]} Keyboard offset.
  */
-export default function useKeyboardOffset( scrollEnabled ) {
+export default function useKeyboardOffset(
+	scrollEnabled,
+	shouldPreventAutomaticScroll
+) {
 	const [ keyboardOffset, setKeyboardOffset ] = useState( 0 );
+	const timeoutRef = useRef();
+
+	const onKeyboardDidHide = useCallback( () => {
+		if ( shouldPreventAutomaticScroll() ) {
+			clearTimeout( timeoutRef.current );
+			return;
+		}
+
+		// A timeout is being used to delay resetting the offset in cases
+		// where the focus is changed to a different TextInput.
+		clearTimeout( timeoutRef.current );
+		timeoutRef.current = setTimeout( () => {
+			setKeyboardOffset( 0 );
+		}, 500 );
+	}, [ shouldPreventAutomaticScroll ] );
 
 	const onKeyboardDidShow = useCallback( ( { endCoordinates } ) => {
+		clearTimeout( timeoutRef.current );
 		setKeyboardOffset( endCoordinates.height );
 	}, [] );
 
-	const onKeyboardDidHide = useCallback( () => {
-		setKeyboardOffset( 0 );
-	}, [] );
-
 	useEffect( () => {
 		let showSubscription;
 		let hideSubscription;
@@ -46,6 +62,7 @@ export default function useKeyboardOffset( scrollEnabled ) {
 		}
 
 		return () => {
+			clearTimeout( timeoutRef.current );
 			showSubscription?.remove();
 			hideSubscription?.remove();
 		};
