Patterns: fix bug with pattern categories not saving sometimes

packages/patterns/src/components/category-selector.js

@@ -29,7 +29,10 @@ const DEFAULT_QUERY = {
 };
 const slug = 'wp_pattern_category';
 
-export default function CategorySelector( { onCategorySelection } ) {
+export default function CategorySelector( {
+	onCategorySelection,
+	setSaveCategoryPromise,
+} ) {
 	const [ values, setValues ] = useState( [] );
 	const [ search, setSearch ] = useState( '' );
 	const debouncedSearch = useDebounce( setSearch, 500 );
@@ -92,13 +95,19 @@ export default function CategorySelector( { onCategorySelection } ) {
 
 		setValues( uniqueTerms );
 
-		Promise.all(
+		// If the user clicks the create pattern modal button directly after entering
+		// a category we need to return a promise so the pattern doesn't save before
+		// the save of the categories is completed.
+		const categorySaving = Promise.all(
 			uniqueTerms.map( ( termName ) =>
 				findOrCreateTerm( { name: termName } )
 			)
 		).then( ( newTerms ) => {
+			setSaveCategoryPromise();
 			onCategorySelection( newTerms );
+			return newTerms;
 		} );
+		setSaveCategoryPromise( categorySaving );
 	}
 
 	return (

packages/patterns/src/components/create-pattern-modal.js

@@ -36,22 +36,27 @@ export default function CreatePatternModal( {
 	const [ syncType, setSyncType ] = useState( PATTERN_SYNC_TYPES.full );
 	const [ categories, setCategories ] = useState( [] );
 	const [ title, setTitle ] = useState( '' );
+	const [ saveCategoryPromise, setSaveCategoryPromise ] = useState();
+	const [ isSaving, setIsSaving ] = useState();
 	const { createPattern } = unlock( useDispatch( patternsStore ) );
 
 	const { createErrorNotice } = useDispatch( noticesStore );
-	async function onCreate( patternTitle, sync ) {
+
+	async function addPattern( patternTitle, sync, patternCategories ) {
 		try {
 			const newPattern = await createPattern(
 				patternTitle,
 				sync,
 				typeof content === 'function' ? content() : content,
-				categories
+				patternCategories
 			);
+			setIsSaving( false );
 			onSuccess( {
 				pattern: newPattern,
 				categoryId: PATTERN_DEFAULT_CATEGORY,
 			} );
 		} catch ( error ) {
+			setIsSaving( false );
 			createErrorNotice( error.message, {
 				type: 'snackbar',
 				id: 'convert-to-pattern-error',
@@ -60,6 +65,22 @@ export default function CreatePatternModal( {
 		}
 	}
 
+	async function onCreate( patternTitle, sync ) {
+		setIsSaving( true );
+		// Check that any onBlur save of the categories is completed
+		// before creating the pattern and closing the modal.
+		if ( saveCategoryPromise ) {
+			const newTerms = await saveCategoryPromise;
+			addPattern(
+				patternTitle,
+				sync,
+				newTerms.map( ( cat ) => cat.id )
+			);
+			return;
+		}
+		addPattern( patternTitle, sync, categories );
+	}
+
 	const handleCategorySelection = ( selectedCategories ) => {
 		setCategories( selectedCategories.map( ( cat ) => cat.id ) );
 	};
@@ -91,6 +112,7 @@ export default function CreatePatternModal( {
 					/>
 					<CategorySelector
 						onCategorySelection={ handleCategorySelection }
+						setSaveCategoryPromise={ setSaveCategoryPromise }
 					/>
 					<ToggleControl
 						label={ __( 'Synced' ) }
@@ -117,7 +139,13 @@ export default function CreatePatternModal( {
 							{ __( 'Cancel' ) }
 						</Button>
 
-						<Button variant="primary" type="submit">
+						<Button
+							variant="primary"
+							type="submit"
+							disabled={ isSaving }
+							aria-disabled={ isSaving }
+							isBusy={ isSaving }
+						>
 							{ __( 'Create' ) }
 						</Button>
 					</HStack>