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,
+	setCategorySaving,
+} ) {
 	const [ values, setValues ] = useState( [] );
 	const [ search, setSearch ] = useState( '' );
 	const debouncedSearch = useDebounce( setSearch, 500 );
@@ -92,13 +95,21 @@ export default function CategorySelector( { onCategorySelection } ) {
 
 		setValues( uniqueTerms );
 
-		Promise.all(
-			uniqueTerms.map( ( termName ) =>
-				findOrCreateTerm( { name: termName } )
-			)
-		).then( ( newTerms ) => {
-			onCategorySelection( newTerms );
+		// 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 = new Promise( function ( resolve ) {
+			Promise.all(
+				uniqueTerms.map( ( termName ) =>
+					findOrCreateTerm( { name: termName } )
+				)
+			).then( ( newTerms ) => {
+				setCategorySaving();
+				onCategorySelection( newTerms );
+				resolve( newTerms );
+			} );
 		} );
+		setCategorySaving( categorySaving );
 	}
 
 	return (

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

@@ -36,16 +36,18 @@ export default function CreatePatternModal( {
 	const [ syncType, setSyncType ] = useState( PATTERN_SYNC_TYPES.full );
 	const [ categories, setCategories ] = useState( [] );
 	const [ title, setTitle ] = useState( '' );
+	const [ categorySaving, setCategorySaving ] = 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
 			);
 			onSuccess( {
 				pattern: newPattern,
@@ -60,6 +62,21 @@ export default function CreatePatternModal( {
 		}
 	}
 
+	async function onCreate( patternTitle, sync ) {
+		// Check that any onBlur save of the categories is completed
+		// before creating the pattern and closing the modal.
+		if ( categorySaving ) {
+			const newTerms = await categorySaving;
+			addPattern(
+				patternTitle,
+				sync,
+				newTerms.map( ( cat ) => cat.id )
+			);
+			return;
+		}
+		addPattern( patternTitle, sync, categories );
+	}
+
 	const handleCategorySelection = ( selectedCategories ) => {
 		setCategories( selectedCategories.map( ( cat ) => cat.id ) );
 	};
@@ -91,6 +108,7 @@ export default function CreatePatternModal( {
 					/>
 					<CategorySelector
 						onCategorySelection={ handleCategorySelection }
+						setCategorySaving={ setCategorySaving }
 					/>
 					<ToggleControl
 						label={ __( 'Synced' ) }