From 8e6ca5dfe2647d61b4d641e040a9fb011f8b59a9 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Sun, 22 May 2022 05:56:54 +0900
Subject: [PATCH] Change to not use withSafeTimeout. ref:
 https://github.com/WordPress/gutenberg/pull/19109

---
 .../src/form-token-field/suggestions-list.tsx  | 18 +++++++++++++-----
 .../components/src/form-token-field/types.ts   |  2 --
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx
index be9376e4bd9c8..b1c86608df78a 100644
--- a/packages/components/src/form-token-field/suggestions-list.tsx
+++ b/packages/components/src/form-token-field/suggestions-list.tsx
@@ -9,7 +9,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { withSafeTimeout, useRefEffect } from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -21,7 +21,7 @@ const handleMouseDown = ( e ) => {
 	e.preventDefault();
 };
 
-export const SuggestionsList = withSafeTimeout( function SuggestionsList( {
+export function SuggestionsList( {
 	selectedIndex,
 	scrollIntoView,
 	match = '',
@@ -30,7 +30,6 @@ export const SuggestionsList = withSafeTimeout( function SuggestionsList( {
 	suggestions = [],
 	displayTransform,
 	instanceId,
-	setTimeout,
 }: SuggestionsListProps ) {
 	const [ scrollingIntoView, setScrollingIntoView ] = useState( false );
 
@@ -38,6 +37,9 @@ export const SuggestionsList = withSafeTimeout( function SuggestionsList( {
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
 			// when already expanded.
+			const { ownerDocument } = listNode;
+			const { defaultView } = ownerDocument;
+			let id;
 			if (
 				selectedIndex > -1 &&
 				scrollIntoView &&
@@ -47,10 +49,16 @@ export const SuggestionsList = withSafeTimeout( function SuggestionsList( {
 				scrollView( listNode.children[ selectedIndex ], listNode, {
 					onlyScrollIfNeeded: true,
 				} );
-				setTimeout( () => {
+				id = defaultView.setTimeout( () => {
 					setScrollingIntoView( false );
 				}, 100 );
 			}
+
+			return () => {
+				if ( id !== undefined ) {
+					defaultView.clearTimeout( id );
+				}
+			};
 		},
 		[ selectedIndex, scrollIntoView ]
 	);
@@ -146,6 +154,6 @@ export const SuggestionsList = withSafeTimeout( function SuggestionsList( {
 			} ) }
 		</ul>
 	);
-} );
+}
 
 export default SuggestionsList;
diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts
index 19112dc320e62..1ea2bc5182946 100644
--- a/packages/components/src/form-token-field/types.ts
+++ b/packages/components/src/form-token-field/types.ts
@@ -14,8 +14,6 @@ export interface SuggestionsListProps< T = Suggestion > {
 	suggestions: T[];
 	displayTransform: ( value: T ) => string;
 	instanceId: string;
-	setTimeout: ( fn: () => void, delay: number ) => number;
-	clearTimeout: ( id: number ) => void;
 }
 
 export interface TokenProps< T = Suggestion > {