Merge pull request #5652 from matuzalemsteles/LPS-191768

fix(@clayui/autocomplete): fix error when not validating value with items

jest.config.js

@@ -14,10 +14,10 @@ module.exports = {
 			statements: 100,
 		},
 		'./packages/clay-autocomplete/src/': {
-			branches: 70,
+			branches: 69,
 			functions: 84,
-			lines: 88,
-			statements: 88,
+			lines: 85,
+			statements: 86,
 		},
 		'./packages/clay-badge/src/': {
 			branches: 0,

packages/clay-autocomplete/src/Autocomplete.tsx

@@ -19,6 +19,7 @@ import {
 	useControlledState,
 	useDebounce,
 	useId,
+	useIsFirstRender,
 	useNavigation,
 	useOverlayPosition,
 } from '@clayui/shared';
@@ -64,6 +65,11 @@ export type IProps<T> = {
 	 */
 	alignmentByViewport?: boolean;
 
+	/**
+	 * Flag to allow an input value not corresponding to an item to be set.
+	 */
+	allowsCustomValue?: boolean;
+
 	/**
 	 * The initial value of the active state (uncontrolled).
 	 */
@@ -170,8 +176,9 @@ function AutocompleteInner<T extends Record<string, any> | string | number>(
 	{
 		UNSAFE_loadingShrink,
 		active: externalActive,
-		as: As = Input,
 		alignmentByViewport: _,
+		allowsCustomValue,
+		as: As = Input,
 		children,
 		containerElementRef,
 		defaultActive,
@@ -240,11 +247,7 @@ function AutocompleteInner<T extends Record<string, any> | string | number>(
 
 	const announcerAPI = useRef<AnnouncerAPI>(null);
 
-	useEffect(() => {
-		if (active === false) {
-			setValue(currentItemSelected.current);
-		}
-	}, [active]);
+	const isFirst = useIsFirstRender();
 
 	const filterFn = useCallback(
 		(itemValue: string) =>
@@ -254,6 +257,44 @@ function AutocompleteInner<T extends Record<string, any> | string | number>(
 		[value]
 	);
 
+	useEffect(() => {
+		// Validates that the initial value exists in the items.
+		if (
+			!allowsCustomValue &&
+			!currentItemSelected.current &&
+			value &&
+			items
+		) {
+			const hasItem = items.find((item) => {
+				if (typeof item === 'string') {
+					return item === value;
+				} else if (typeof item === 'object') {
+					// filter key is not defined and we cannot infer the data type.
+					if (!filterKey) {
+						return false;
+					}
+
+					return item[filterKey] === value;
+				}
+			});
+
+			if (hasItem) {
+				currentItemSelected.current = value;
+			}
+		}
+	}, []);
+
+	useEffect(() => {
+		// Does not update state on first render.
+		if (isFirst || allowsCustomValue) {
+			return;
+		}
+
+		if (active === false && currentItemSelected.current !== value) {
+			setValue(currentItemSelected.current);
+		}
+	}, [active]);
+
 	const filteredItems = useMemo(() => {
 		if (debouncedLoadingChange) {
 			return [];

packages/clay-shared/src/index.tsx

@@ -26,6 +26,7 @@ export {useNavigation, isTypeahead, getFocusableList} from './useNavigation';
 export {useOverlayPosition} from './useOverlayPositon';
 export {useHover} from './useHover';
 export {useIsMobileDevice} from './useIsMobileDevice';
+export {useIsFirstRender} from './useIsFirstRender';
 export {isMac, isIPhone, isIPad, isIOS, isAppleDevice} from './platform';
 export type {AlignPoints} from './useOverlayPositon';
 export type {IBaseProps as IPortalBaseProps} from './Portal';

packages/clay-shared/src/useIsFirstRender.ts

@@ -0,0 +1,18 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {useRef} from 'react';
+
+export function useIsFirstRender() {
+	const isFirst = useRef(true);
+
+	if (isFirst.current) {
+		isFirst.current = false;
+
+		return true;
+	}
+
+	return isFirst.current;
+}