From e3c328f779971ae0c031b17cf5fef2e7aef33ae0 Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Thu, 1 Feb 2024 12:26:54 -0800
Subject: [PATCH] Try mounting on first render to avoid required defaultValue

---
 .../src/custom-select-control-v2/custom-select.tsx  | 13 +++++++++++--
 .../legacy-component/index.tsx                      |  1 -
 .../stories/default.story.tsx                       |  1 -
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
index d4bba30ce76dc1..e959ca33a82514 100644
--- a/packages/components/src/custom-select-control-v2/custom-select.tsx
+++ b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { createContext, useMemo, useState } from '@wordpress/element';
+import {
+	createContext,
+	useEffect,
+	useMemo,
+	useState,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, chevronDown } from '@wordpress/icons';
 
@@ -104,7 +109,11 @@ function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
 		...restProps
 	} = props;
 
-	const [ unmountOnHide, setUnmountOnHide ] = useState( true );
+	const [ unmountOnHide, setUnmountOnHide ] = useState( false );
+
+	useEffect( () => {
+		setUnmountOnHide( true );
+	}, [] );
 
 	return (
 		<>
diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
index 16b2662554648b..82ec58ce5a248e 100644
--- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
+++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
@@ -51,7 +51,6 @@ function _LegacyCustomSelect( props: LegacyCustomSelectProps ) {
 			};
 			onChange( changeObject );
 		},
-		defaultValue: options[ 0 ].name,
 	} );
 
 	const children = options.map(
diff --git a/packages/components/src/custom-select-control-v2/stories/default.story.tsx b/packages/components/src/custom-select-control-v2/stories/default.story.tsx
index 3f89fe85a98051..fd7887e41b214a 100644
--- a/packages/components/src/custom-select-control-v2/stories/default.story.tsx
+++ b/packages/components/src/custom-select-control-v2/stories/default.story.tsx
@@ -140,7 +140,6 @@ const renderControlledValue = ( gravatar: string | string[] ) => {
 export const Controlled = ControlledTemplate.bind( {} );
 Controlled.args = {
 	label: 'Default Gravatars',
-	defaultValue: 'wavatar',
 	renderSelectedValue: renderControlledValue,
 	children: (
 		<>