From e040716d54977e0c15f11b7ad4cd32f705e1c36c Mon Sep 17 00:00:00 2001
From: Pedro Duarte <pedro.duarte@tecnico.ulisboa.pt>
Date: Thu, 7 Jul 2022 23:24:55 +0100
Subject: [PATCH 01/12] Add `fetchOnFocus` prop to ContentSearch

This new prop allows control over the focus state on ContentSearch. It
will trigger a fetch just by focusing the search field, making the user
aware of what they might be selecting from.

To keep previous expectations the default value is `false`.
---
 components/content-search/index.js  | 24 +++++++++++++++++++-----
 components/content-search/readme.md |  4 ++--
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/components/content-search/index.js b/components/content-search/index.js
index 10ab8e64..38db3b7b 100644
--- a/components/content-search/index.js
+++ b/components/content-search/index.js
@@ -22,11 +22,13 @@ const ContentSearch = ({
 	perPage,
 	queryFilter,
 	excludeItems,
+	fetchOnFocus,
 }) => {
 	const [searchString, setSearchString] = useState('');
 	const [searchQueries, setSearchQueries] = useState({});
 	const [selectedItem, setSelectedItem] = useState(null);
 	const [currentPage, setCurrentPage] = useState(1);
+	const [isFocused, setIsFocused] = useState(false);
 
 	const mounted = useRef(true);
 
@@ -131,17 +133,17 @@ const ContentSearch = ({
 	/**
 	 * handleSearchStringChange
 	 *
-	 * Using the keyword and the list of tags that are linked to the parent block
-	 * search for posts/terms that match and return them to the autocomplete component.
+	 * Using the keyword and the list of tags that are linked to the parent
+	 * block search for posts/terms/users that match and return them to the
+	 * autocomplete component.
 	 *
 	 * @param {string} keyword search query string
 	 * @param {string} page page query string
 	 */
 	const handleSearchStringChange = (keyword, page) => {
+		// Reset page and query on empty keyword.
 		if (keyword.trim() === '') {
-			setSearchString(keyword);
 			setCurrentPage(1);
-			return;
 		}
 
 		const preparedQuery = prepareSearchQuery(keyword, page);
@@ -327,9 +329,19 @@ const ContentSearch = ({
 				}}
 				placeholder={placeholder}
 				autoComplete="off"
+				onFocus={() => {
+					setIsFocused(true);
+
+					if (fetchOnFocus) {
+						handleSearchStringChange('', 1);
+					}
+				}}
+				onBlur={() => {
+					setIsFocused(false);
+				}}
 			/>
 
-			{hasSearchString ? (
+			{hasSearchString || (fetchOnFocus && isFocused) ? (
 				<>
 					<ul className={`${NAMESPACE}-list`} css={listCSS}>
 						{isLoading && currentPage === 1 && (
@@ -406,6 +418,7 @@ ContentSearch.defaultProps = {
 	onSelectItem: () => {
 		console.log('Select!'); // eslint-disable-line no-console
 	},
+	fetchOnFocus: false,
 };
 
 ContentSearch.propTypes = {
@@ -417,6 +430,7 @@ ContentSearch.propTypes = {
 	excludeItems: PropTypes.array,
 	label: PropTypes.string,
 	perPage: PropTypes.number,
+	fetchOnFocus: PropTypes.bool,
 };
 
 export { ContentSearch };
diff --git a/components/content-search/readme.md b/components/content-search/readme.md
index 21a9457f..5e9211c4 100644
--- a/components/content-search/readme.md
+++ b/components/content-search/readme.md
@@ -25,11 +25,11 @@ function MyComponent( props ) {
 | Name           | Type       | Default                              | Description                                                                                                                    |
 |----------------|------------|--------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|
 | `onSelectItem` | `function` | `undefined`                          | Function called when a searched item is clicked                                                                                |
-| `queryFilter`  | `function` | `(query, parametersObject) => query` | Function called to allow you to customize the query before is made. It's advisable to use `useCallback` to save this parameter |
+| `queryFilter`  | `function` | `(query, parametersObject) => query` | Function called to allow you to customize the query before it's made. It's advisable to use `useCallback` to save this parameter |
 | `label`        | `string`   | `''`                                 | Renders a label for the Search Field.                                                                                          |
 | `mode`         | `string`   | `'post'`                             | One of: `post`, `user`, `term`                                                                                                 |
 | `placeholder`  | `string`   | `''`                                 | Renders placeholder text inside the Search Field.                                                                              |
 | `contentTypes` | `array`    | `[ 'post', 'page' ]`                 | Names of the post types or taxonomies that should get searched                                                                 |
 | `excludeItems` | `array`    | `[ { id: 1, type: 'post' ]`          | Items to exclude from search                                                                                                   |
 | `perPage`      | `number`   | `50`                                 | Number of items to show during search                                                                                          |
-
+| `fetchOnFocus` | `bool`     | `false`                              | Query for results when focusing Search                                                                                          |

From b405da32ebb337bd488f38ff6d06e1cbdf5ea8e7 Mon Sep 17 00:00:00 2001
From: Pedro Duarte <pedro.duarte@tecnico.ulisboa.pt>
Date: Thu, 7 Jul 2022 23:38:27 +0100
Subject: [PATCH 02/12] Enable `fetchOnFocus` for empty ContentPickers

This makes the ContentSearch provide results when focusing the search
field for all pickers without any selected items.
---
 components/content-picker/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/content-picker/index.js b/components/content-picker/index.js
index d5499ee1..fda92a15 100644
--- a/components/content-picker/index.js
+++ b/components/content-picker/index.js
@@ -129,6 +129,7 @@ const ContentPicker = ({
 					mode={mode}
 					queryFilter={queryFilter}
 					perPage={perPage}
+					fetchOnFocus={content.length === 0}
 				/>
 			) : (
 				label && (

From 62fa1bb9b29a12e7d8d11d62cb686ff74bef5723 Mon Sep 17 00:00:00 2001
From: Pedro Duarte <pedro.duarte@tecnico.ulisboa.pt>
Date: Fri, 8 Jul 2022 21:55:39 +0100
Subject: [PATCH 03/12] Fix logic after adding state and onBlur.

---
 components/content-search/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/content-search/index.js b/components/content-search/index.js
index 38db3b7b..bfc95085 100644
--- a/components/content-search/index.js
+++ b/components/content-search/index.js
@@ -287,6 +287,7 @@ const ContentSearch = ({
 
 	const hasSearchString = !!searchString.length;
 	const hasSearchResults = searchResults && !!searchResults.length;
+	const hasFocusResults = fetchOnFocus && (isFocused || hasSearchResults);
 
 	const listCSS = css`
 		/* stylelint-disable */
@@ -341,7 +342,7 @@ const ContentSearch = ({
 				}}
 			/>
 
-			{hasSearchString || (fetchOnFocus && isFocused) ? (
+			{hasSearchString || hasFocusResults ? (
 				<>
 					<ul className={`${NAMESPACE}-list`} css={listCSS}>
 						{isLoading && currentPage === 1 && (

From 4547c233f4dda30b3e4f3592f21b6c831a51db3f Mon Sep 17 00:00:00 2001
From: Pedro Duarte <pedro.duarte@tecnico.ulisboa.pt>
Date: Fri, 8 Jul 2022 21:56:14 +0100
Subject: [PATCH 04/12] Correct typo and remove duplicate props.

---
 example/src/blocks/hello-world/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/example/src/blocks/hello-world/index.js b/example/src/blocks/hello-world/index.js
index d531d6c4..6280f6dd 100644
--- a/example/src/blocks/hello-world/index.js
+++ b/example/src/blocks/hello-world/index.js
@@ -47,15 +47,13 @@ registerBlockType( `${ NAMESPACE }/hello-world`, {
                     />
                 </PanelBody>
             </InspectorControls>
-            <Placeholder label={ __( 'Post Picker', NAMESPACE ) } instructions={ __( 'Use the text field so search for a post', NAMESPACE) } className={ className }>
+            <Placeholder label={ __( 'Post Picker', NAMESPACE ) } instructions={ __( 'Use the text field to search for a post', NAMESPACE) } className={ className }>
                 <ContentPicker 
                     postTypes={ [ 'page', 'post' ] }
                     label={ __( 'Select a Post or Page', NAMESPACE ) }
                     onPickChange={ handlePostSelection }
                     content={ selectedPost }
                     perPage={3}
-                    maxContentItems={ 5 }
-                    isOrderable={ true }
                     maxContentItems={5}
                     isOrderable={true}
                 />

From 9d762ace142fd7364a04029e1e4ec805c073700e Mon Sep 17 00:00:00 2001
From: Pedro Duarte <pedro.duarte@tecnico.ulisboa.pt>
Date: Fri, 8 Jul 2022 21:57:18 +0100
Subject: [PATCH 05/12] New test block with just the Content Search component.

---
 .../blocks/content-search-example/index.js    | 76 +++++++++++++++++++
 example/src/index.js                          |  1 +
 2 files changed, 77 insertions(+)
 create mode 100644 example/src/blocks/content-search-example/index.js

diff --git a/example/src/blocks/content-search-example/index.js b/example/src/blocks/content-search-example/index.js
new file mode 100644
index 00000000..cd707b5f
--- /dev/null
+++ b/example/src/blocks/content-search-example/index.js
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, Placeholder, Notice, CheckboxControl } from '@wordpress/components';
+
+import { ContentSearch } from '@10up/block-components';
+
+const NAMESPACE = 'example';
+
+registerBlockType( `${ NAMESPACE }/content-search`, {
+    title: __( 'Post Searcher', NAMESPACE ),
+    description: __( 'Example Block to show the Content Search in usage', NAMESPACE ),
+    icon: 'smiley',
+    category: 'common',
+    example: {},
+    supports: {
+        html: false
+    },
+    attributes: {
+        selectedPost: {
+            type: 'array'
+        }
+    },
+    transforms: {},
+    variations: [],
+    edit: (props) => {
+        const [fetchOnFocus, setFetchOnFocus] = useState(false);
+
+        const {
+            className,
+            attributes: { selectedPost },
+            setAttributes
+        } = props;
+
+        function handlePostSelection( post ) {
+            setAttributes( { selectedPost: post } )
+        }
+
+        return (
+            <>
+            <InspectorControls>
+                <PanelBody title={ __( 'Post Searcher', NAMESPACE ) }>
+                    <ContentSearch
+                        label={ __( 'Select a Post or Page', NAMESPACE ) }
+                        contentTypes={ [ 'page', 'post' ] }
+                        onSelectItem={ handlePostSelection }
+                        fetchOnFocus={fetchOnFocus}
+                    />
+                </PanelBody>
+            </InspectorControls>
+            <Placeholder label={ __( 'Post Searcher', NAMESPACE ) } instructions={ __( 'Use the text field to search for a post', NAMESPACE) } className={ className }>
+                <ContentSearch
+                    label={ __( 'Select a Post or Page', NAMESPACE ) }
+                    contentTypes={ [ 'page', 'post' ] }
+                    onSelectItem={ handlePostSelection }
+                    fetchOnFocus={fetchOnFocus}
+                />
+                <div style={{ width: '100%' }}>
+                    <CheckboxControl
+                        label="Enable fetch on focus"
+                        checked={fetchOnFocus}
+                        onChange={setFetchOnFocus}
+                    />
+                </div>
+            </Placeholder>
+            {selectedPost && (
+                <Notice status="info" isDismissible={false} >
+                    <p>{selectedPost.title}</p>
+                </Notice>
+            )}
+            </>
+        )
+    },
+    save: () => null
+} );
diff --git a/example/src/index.js b/example/src/index.js
index e8ef6b70..e58a5d24 100644
--- a/example/src/index.js
+++ b/example/src/index.js
@@ -4,3 +4,4 @@ import './blocks/icon-picker-example';
 import './blocks/repeater-component-example';
 import './blocks/link-example';
 import './blocks/image-example';
+import './blocks/content-search-example';

From c18fe5746f64a56b87126ef684b71a007eaa1bbd Mon Sep 17 00:00:00 2001
From: Pedro Duarte <pedro.duarte@tecnico.ulisboa.pt>
Date: Fri, 8 Jul 2022 21:58:09 +0100
Subject: [PATCH 06/12] Cypress test script for Content Search logic with .

---
 cypress/integration/ContentSearch.spec.js | 28 +++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 cypress/integration/ContentSearch.spec.js

diff --git a/cypress/integration/ContentSearch.spec.js b/cypress/integration/ContentSearch.spec.js
new file mode 100644
index 00000000..3dba353c
--- /dev/null
+++ b/cypress/integration/ContentSearch.spec.js
@@ -0,0 +1,28 @@
+/// <reference types="cypress" />
+
+context('ContentSearch', () => {
+
+	beforeEach(() => {
+		cy.loginToWordPress();
+	});
+
+	it('Adding sample post.', () => {
+		cy.createPost({title: 'Sample post'});
+		cy.savePost();
+	})
+
+	it('allows the user to search without seeing results on focus', () => {
+		cy.createPost({title: 'Post Searcher without fetchOnFocus'});
+		cy.insertBlock('Post Searcher');
+        cy.get('.wp-block-example-content-search .components-text-control__input').focus();
+        cy.get('.tenup-content-search-list').should('not.exist');
+	})
+
+	it('allows the user to see results on focus', () => {
+		cy.createPost({title: 'Post Searcher with fetchOnFocus'});
+		cy.insertBlock('Post Searcher');
+        cy.get('.wp-block-example-content-search .components-checkbox-control__input').click();
+        cy.get('.wp-block-example-content-search .components-text-control__input').focus();
+        cy.get('.tenup-content-search-list').should('exist');
+	})
+})

From 64a87e6f47a3993833ebd13e94d2da566ad40935 Mon Sep 17 00:00:00 2001
From: Pedro Duarte <pedro.duarte@tecnico.ulisboa.pt>
Date: Fri, 8 Jul 2022 21:58:38 +0100
Subject: [PATCH 07/12] Cypress test script for new ContentPicker experience
 with focus.

---
 cypress/integration/ContentPicker.spec.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 cypress/integration/ContentPicker.spec.js

diff --git a/cypress/integration/ContentPicker.spec.js b/cypress/integration/ContentPicker.spec.js
new file mode 100644
index 00000000..8e1040bd
--- /dev/null
+++ b/cypress/integration/ContentPicker.spec.js
@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+
+context('ContentPicker', () => {
+
+	beforeEach(() => {
+		cy.loginToWordPress();
+	});
+
+	it('Adding sample post.', () => {
+		cy.createPost({title: 'Sample post'});
+		cy.savePost();
+	})
+
+	it('allows the user to see results when on focus', () => {
+		cy.createPost({title: 'Post Picker'});
+		cy.insertBlock('Hello World');
+		cy.get('.wp-block-example-hello-world .components-text-control__input').focus();
+		cy.get('.tenup-content-search-list').should('exist');
+	})
+})

From a1e59c8789f1189f8d35f403b2fe819a97107b93 Mon Sep 17 00:00:00 2001
From: Pedro Duarte <pedro.duarte@tecnico.ulisboa.pt>
Date: Fri, 5 Aug 2022 10:21:04 +0100
Subject: [PATCH 08/12] Replace `fetchOnFocus` with `fetchInitialResults`

This is a new approach to the solution where the results may be
prefetched to display when focusing. This is only valid once the
component mounts.
---
 components/content-picker/index.js            |  2 +-
 components/content-search/index.js            | 20 +++++++++--------
 components/content-search/readme.md           | 18 +++++++--------
 cypress/integration/ContentSearch.spec.js     | 14 +++---------
 .../blocks/content-search-example/index.js    | 22 +++----------------
 5 files changed, 27 insertions(+), 49 deletions(-)

diff --git a/components/content-picker/index.js b/components/content-picker/index.js
index fda92a15..538e0de4 100644
--- a/components/content-picker/index.js
+++ b/components/content-picker/index.js
@@ -129,7 +129,7 @@ const ContentPicker = ({
 					mode={mode}
 					queryFilter={queryFilter}
 					perPage={perPage}
-					fetchOnFocus={content.length === 0}
+					fetchInitialResults
 				/>
 			) : (
 				label && (
diff --git a/components/content-search/index.js b/components/content-search/index.js
index bfc95085..3c61ea2c 100644
--- a/components/content-search/index.js
+++ b/components/content-search/index.js
@@ -22,7 +22,7 @@ const ContentSearch = ({
 	perPage,
 	queryFilter,
 	excludeItems,
-	fetchOnFocus,
+	fetchInitialResults,
 }) => {
 	const [searchString, setSearchString] = useState('');
 	const [searchQueries, setSearchQueries] = useState({});
@@ -181,9 +181,15 @@ const ContentSearch = ({
 	};
 
 	useEffect(() => {
+		// Trigger initial fetch if enabled.
+		if (fetchInitialResults) {
+			handleSearchStringChange('', 1);
+		}
+
 		return () => {
 			mounted.current = false;
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	useEffect(() => {
@@ -287,7 +293,7 @@ const ContentSearch = ({
 
 	const hasSearchString = !!searchString.length;
 	const hasSearchResults = searchResults && !!searchResults.length;
-	const hasFocusResults = fetchOnFocus && (isFocused || hasSearchResults);
+	const hasInitalResults = fetchInitialResults && isFocused;
 
 	const listCSS = css`
 		/* stylelint-disable */
@@ -332,17 +338,13 @@ const ContentSearch = ({
 				autoComplete="off"
 				onFocus={() => {
 					setIsFocused(true);
-
-					if (fetchOnFocus) {
-						handleSearchStringChange('', 1);
-					}
 				}}
 				onBlur={() => {
 					setIsFocused(false);
 				}}
 			/>
 
-			{hasSearchString || hasFocusResults ? (
+			{hasSearchString || hasInitalResults ? (
 				<>
 					<ul className={`${NAMESPACE}-list`} css={listCSS}>
 						{isLoading && currentPage === 1 && (
@@ -419,7 +421,7 @@ ContentSearch.defaultProps = {
 	onSelectItem: () => {
 		console.log('Select!'); // eslint-disable-line no-console
 	},
-	fetchOnFocus: false,
+	fetchInitialResults: false,
 };
 
 ContentSearch.propTypes = {
@@ -431,7 +433,7 @@ ContentSearch.propTypes = {
 	excludeItems: PropTypes.array,
 	label: PropTypes.string,
 	perPage: PropTypes.number,
-	fetchOnFocus: PropTypes.bool,
+	fetchInitialResults: PropTypes.bool,
 };
 
 export { ContentSearch };
diff --git a/components/content-search/readme.md b/components/content-search/readme.md
index 5e9211c4..b9d2dceb 100644
--- a/components/content-search/readme.md
+++ b/components/content-search/readme.md
@@ -24,12 +24,12 @@ function MyComponent( props ) {
 
 | Name           | Type       | Default                              | Description                                                                                                                    |
 |----------------|------------|--------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|
-| `onSelectItem` | `function` | `undefined`                          | Function called when a searched item is clicked                                                                                |
-| `queryFilter`  | `function` | `(query, parametersObject) => query` | Function called to allow you to customize the query before it's made. It's advisable to use `useCallback` to save this parameter |
-| `label`        | `string`   | `''`                                 | Renders a label for the Search Field.                                                                                          |
-| `mode`         | `string`   | `'post'`                             | One of: `post`, `user`, `term`                                                                                                 |
-| `placeholder`  | `string`   | `''`                                 | Renders placeholder text inside the Search Field.                                                                              |
-| `contentTypes` | `array`    | `[ 'post', 'page' ]`                 | Names of the post types or taxonomies that should get searched                                                                 |
-| `excludeItems` | `array`    | `[ { id: 1, type: 'post' ]`          | Items to exclude from search                                                                                                   |
-| `perPage`      | `number`   | `50`                                 | Number of items to show during search                                                                                          |
-| `fetchOnFocus` | `bool`     | `false`                              | Query for results when focusing Search                                                                                          |
+| `onSelectItem`        | `function` | `undefined`                          | Function called when a searched item is clicked                                                                                |
+| `queryFilter`         | `function` | `(query, parametersObject) => query` | Function called to allow you to customize the query before it's made. It's advisable to use `useCallback` to save this parameter |
+| `label`               | `string`   | `''`                                 | Renders a label for the Search Field.                                                                                          |
+| `mode`                | `string`   | `'post'`                             | One of: `post`, `user`, `term`                                                                                                 |
+| `placeholder`         | `string`   | `''`                                 | Renders placeholder text inside the Search Field.                                                                              |
+| `contentTypes`        | `array`    | `[ 'post', 'page' ]`                 | Names of the post types or taxonomies that should get searched                                                                 |
+| `excludeItems`        | `array`    | `[ { id: 1, type: 'post' ]`          | Items to exclude from search                                                                                                   |
+| `perPage`             | `number`   | `50`                                 | Number of items to show during search                                                                                          |
+| `fetchInitialResults` | `bool`     | `false`                              | Fetch initial results to present when focusing the search input                                                                                          |
diff --git a/cypress/integration/ContentSearch.spec.js b/cypress/integration/ContentSearch.spec.js
index 3dba353c..5ff4d389 100644
--- a/cypress/integration/ContentSearch.spec.js
+++ b/cypress/integration/ContentSearch.spec.js
@@ -11,18 +11,10 @@ context('ContentSearch', () => {
 		cy.savePost();
 	})
 
-	it('allows the user to search without seeing results on focus', () => {
-		cy.createPost({title: 'Post Searcher without fetchOnFocus'});
-		cy.insertBlock('Post Searcher');
-        cy.get('.wp-block-example-content-search .components-text-control__input').focus();
-        cy.get('.tenup-content-search-list').should('not.exist');
-	})
-
-	it('allows the user to see results on focus', () => {
+	it('allows the user to see initial results on focus', () => {
 		cy.createPost({title: 'Post Searcher with fetchOnFocus'});
 		cy.insertBlock('Post Searcher');
-        cy.get('.wp-block-example-content-search .components-checkbox-control__input').click();
-        cy.get('.wp-block-example-content-search .components-text-control__input').focus();
-        cy.get('.tenup-content-search-list').should('exist');
+		cy.get('.wp-block-example-content-search .components-text-control__input').focus();
+		cy.get('.tenup-content-search-list').should('exist');
 	})
 })
diff --git a/example/src/blocks/content-search-example/index.js b/example/src/blocks/content-search-example/index.js
index cd707b5f..1ac1c0f1 100644
--- a/example/src/blocks/content-search-example/index.js
+++ b/example/src/blocks/content-search-example/index.js
@@ -1,8 +1,7 @@
-import { useState } from 'react';
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
-import { PanelBody, Placeholder, Notice, CheckboxControl } from '@wordpress/components';
+import { PanelBody, Placeholder } from '@wordpress/components';
 
 import { ContentSearch } from '@10up/block-components';
 
@@ -25,11 +24,8 @@ registerBlockType( `${ NAMESPACE }/content-search`, {
     transforms: {},
     variations: [],
     edit: (props) => {
-        const [fetchOnFocus, setFetchOnFocus] = useState(false);
-
         const {
             className,
-            attributes: { selectedPost },
             setAttributes
         } = props;
 
@@ -45,7 +41,7 @@ registerBlockType( `${ NAMESPACE }/content-search`, {
                         label={ __( 'Select a Post or Page', NAMESPACE ) }
                         contentTypes={ [ 'page', 'post' ] }
                         onSelectItem={ handlePostSelection }
-                        fetchOnFocus={fetchOnFocus}
+                        fetchInitialResults
                     />
                 </PanelBody>
             </InspectorControls>
@@ -54,21 +50,9 @@ registerBlockType( `${ NAMESPACE }/content-search`, {
                     label={ __( 'Select a Post or Page', NAMESPACE ) }
                     contentTypes={ [ 'page', 'post' ] }
                     onSelectItem={ handlePostSelection }
-                    fetchOnFocus={fetchOnFocus}
+                    fetchInitialResults
                 />
-                <div style={{ width: '100%' }}>
-                    <CheckboxControl
-                        label="Enable fetch on focus"
-                        checked={fetchOnFocus}
-                        onChange={setFetchOnFocus}
-                    />
-                </div>
             </Placeholder>
-            {selectedPost && (
-                <Notice status="info" isDismissible={false} >
-                    <p>{selectedPost.title}</p>
-                </Notice>
-            )}
             </>
         )
     },

From 63350b3e25af5ae0a97285d308bc0476059c6d61 Mon Sep 17 00:00:00 2001
From: Pedro Duarte <pedro.duarte@tecnico.ulisboa.pt>
Date: Fri, 5 Aug 2022 11:23:16 +0100
Subject: [PATCH 09/12] Add conditinal check for prop.

---
 components/content-picker/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/content-picker/index.js b/components/content-picker/index.js
index 538e0de4..26e1b75b 100644
--- a/components/content-picker/index.js
+++ b/components/content-picker/index.js
@@ -129,7 +129,7 @@ const ContentPicker = ({
 					mode={mode}
 					queryFilter={queryFilter}
 					perPage={perPage}
-					fetchInitialResults
+					fetchInitialResults={content.length === 0}
 				/>
 			) : (
 				label && (

From 2677644c2ce6433edc287333456dbb79eec420eb Mon Sep 17 00:00:00 2001
From: Pedro Duarte <pedro.duarte@tecnico.ulisboa.pt>
Date: Tue, 9 Aug 2022 18:27:06 +0100
Subject: [PATCH 10/12] Add `fetchInitialResults` to `ContentPicker`

Extende the prop from `ContentSearch` to be controllable by the
`ContentPicker` interface. Set the default value to `true` to enhance
UX.
---
 components/content-picker/index.js  |  6 +++++-
 components/content-picker/readme.md | 25 +++++++++++++------------
 components/content-search/index.js  |  4 ++--
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/components/content-picker/index.js b/components/content-picker/index.js
index 26e1b75b..85c36ca1 100644
--- a/components/content-picker/index.js
+++ b/components/content-picker/index.js
@@ -49,6 +49,7 @@ const ContentPickerWrapper = styled('div')`
  * @param {boolean} props.uniqueContentItems whether or not the picker should only show unique items
  * @param {boolean} props.excludeCurrentPost whether or not to exclude the current post from the picker
  * @param {number} props.perPage number of items to show per page
+ * @param {boolean} props.fetchInitialResults whether or not to fetch initial results on mount
  * @returns {*} React JSX
  */
 const ContentPicker = ({
@@ -66,6 +67,7 @@ const ContentPicker = ({
 	uniqueContentItems,
 	excludeCurrentPost,
 	perPage,
+	fetchInitialResults,
 }) => {
 	const currentPostId = select('core/editor')?.getCurrentPostId();
 
@@ -129,7 +131,7 @@ const ContentPicker = ({
 					mode={mode}
 					queryFilter={queryFilter}
 					perPage={perPage}
-					fetchInitialResults={content.length === 0}
+					fetchInitialResults={fetchInitialResults}
 				/>
 			) : (
 				label && (
@@ -187,6 +189,7 @@ ContentPicker.defaultProps = {
 	excludeCurrentPost: true,
 	multiPickedLabel: __('You have selected the following items:', '10up-block-components'),
 	singlePickedLabel: __('You have selected the following item:', '10up-block-components'),
+	fetchInitialResults: true,
 };
 
 ContentPicker.propTypes = {
@@ -204,6 +207,7 @@ ContentPicker.propTypes = {
 	excludeCurrentPost: PropTypes.bool,
 	maxContentItems: PropTypes.number,
 	perPage: PropTypes.number,
+	fetchInitialResults: PropTypes.bool,
 };
 
 export { ContentPicker };
diff --git a/components/content-picker/readme.md b/components/content-picker/readme.md
index a95612e3..67ed90ea 100644
--- a/components/content-picker/readme.md
+++ b/components/content-picker/readme.md
@@ -26,18 +26,19 @@ function MyComponent( props ) {
 
 | Name                 | Type       | Default              | Description                                                                                                                                                                                                                                                                                                                                                                                                            |
 |----------------------|------------|----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `onPickChange`       | `function` | `undefined`          | Callback function the list of picked content gets changed                                                                                                                                                                                                                                                                                                                                                              |
-| `queryFilter`        | `function` | `undefined`          | Function called to allow you to customize the query before is made. It's advisable to use `useCallback` to save this parameter                                                                                                                                                                                                                                                                                         |
-| `label`              | `string`   | `''`                 | Renders a label for the Search Field.                                                                                                                                                                                                                                                                                                                                                                                  |
-| `mode`               | `string`   | `'post'`             | One of: `post`, `user`, `term`                                                                                                                                                                                                                                                                                                                                                                                         |
-| `placeholder`        | `string`   | `''`                 | Renders placeholder text inside the Search Field.                                                                                                                                                                                                                                                                                                                                                                      |
-| `contentTypes`       | `array`    | `[ 'post', 'page' ]` | Names of the post types or taxonomies that should get searched                                                                                                                                                                                                                                                                                                                                                         |
-| `maxContentItems`    | `number`   | `1`                  | Max number of items a user can select.                                                                                                                                                                                                                                                                                                                                                                                 |
-| `isOrderable`        | `bool`     | `false`              | When true, will allow the user to order items. Must be used in conjunction with `maxContentItems > 1`                                                                                                                                                                                                                                                                                                                  |
-| `uniqueContentItems` | `bool`     | `true`               | Prevent duplicate items from being picked.                                                                                                                                                                                                                                                                                                                                                                             |
-| `excludeCurrentPost` | `bool`     | `true`               | Don't allow user to pick the current post. Only applicable on the editor screen.                                                                                                                                                                                                                                                                                                                                       |
-| `content`            | `array`    | `[]`                 | Array of items to pre-populate picker with. Must be in the format of: `[{id: 1, type: 'post', uuid: '...',}, {id: 1, uuid: '...', type: 'page'},... ]`. You cannot provide terms and posts to the same picker. `uuid` was added as of version 1.5.0. It is only used as the React component list key in the admin. If it is not included, `id` will be used which will cause errors if you select the same post twice. |
-| `perPage`            | `number`   | `50`                 | Number of items to show during search                                                                                                                                                                                                                                                                                                                                                                                  |
+| `onPickChange`        | `function` | `undefined`          | Callback function the list of picked content gets changed                                                                                                                                                                                                                                                                                                                                                              |
+| `queryFilter`         | `function` | `undefined`          | Function called to allow you to customize the query before is made. It's advisable to use `useCallback` to save this parameter                                                                                                                                                                                                                                                                                         |
+| `label`               | `string`   | `''`                 | Renders a label for the Search Field.                                                                                                                                                                                                                                                                                                                                                                                  |
+| `mode`                | `string`   | `'post'`             | One of: `post`, `user`, `term`                                                                                                                                                                                                                                                                                                                                                                                         |
+| `placeholder`         | `string`   | `''`                 | Renders placeholder text inside the Search Field.                                                                                                                                                                                                                                                                                                                                                                      |
+| `contentTypes`        | `array`    | `[ 'post', 'page' ]` | Names of the post types or taxonomies that should get searched                                                                                                                                                                                                                                                                                                                                                         |
+| `maxContentItems`     | `number`   | `1`                  | Max number of items a user can select.                                                                                                                                                                                                                                                                                                                                                                                 |
+| `isOrderable`         | `bool`     | `false`              | When true, will allow the user to order items. Must be used in conjunction with `maxContentItems > 1`                                                                                                                                                                                                                                                                                                                  |
+| `uniqueContentItems`  | `bool`     | `true`               | Prevent duplicate items from being picked.                                                                                                                                                                                                                                                                                                                                                                             |
+| `excludeCurrentPost`  | `bool`     | `true`               | Don't allow user to pick the current post. Only applicable on the editor screen.                                                                                                                                                                                                                                                                                                                                       |
+| `content`             | `array`    | `[]`                 | Array of items to pre-populate picker with. Must be in the format of: `[{id: 1, type: 'post', uuid: '...',}, {id: 1, uuid: '...', type: 'page'},... ]`. You cannot provide terms and posts to the same picker. `uuid` was added as of version 1.5.0. It is only used as the React component list key in the admin. If it is not included, `id` will be used which will cause errors if you select the same post twice. |
+| `perPage`             | `number`   | `50`                 | Number of items to show during search
+| `fetchInitialResults` | `bool`     | `true`               | Fetch initial results to present when focusing the search input                                                                                          |                                                                                                                                                                                                                                                                                                                                                                                  |
 __NOTE:__ Content picker cannot validate that posts you pass it via `content` prop actually exist. If a post does not exist, it will not render as one of the picked items but will still be passed back as picked items if new items are picked/sorted. Therefore, on save you need to validate that all the picked posts/terms actually exist.
 
 The `contentTypes` will get used in a Rest Request to the `search` endpoint as the `subtypes`:
diff --git a/components/content-search/index.js b/components/content-search/index.js
index 3c61ea2c..a25c1b62 100644
--- a/components/content-search/index.js
+++ b/components/content-search/index.js
@@ -293,7 +293,7 @@ const ContentSearch = ({
 
 	const hasSearchString = !!searchString.length;
 	const hasSearchResults = searchResults && !!searchResults.length;
-	const hasInitalResults = fetchInitialResults && isFocused;
+	const hasInitialResults = fetchInitialResults && isFocused;
 
 	const listCSS = css`
 		/* stylelint-disable */
@@ -344,7 +344,7 @@ const ContentSearch = ({
 				}}
 			/>
 
-			{hasSearchString || hasInitalResults ? (
+			{hasSearchString || hasInitialResults ? (
 				<>
 					<ul className={`${NAMESPACE}-list`} css={listCSS}>
 						{isLoading && currentPage === 1 && (

From 1ea3001f133bfc4250660065b85a791a878de425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20K=C3=A4gy?= <mail@fabian-kaegy.de>
Date: Wed, 24 May 2023 13:42:39 +0200
Subject: [PATCH 11/12] Update index.js

---
 components/content-picker/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/content-picker/index.js b/components/content-picker/index.js
index 85c36ca1..ce9ba976 100644
--- a/components/content-picker/index.js
+++ b/components/content-picker/index.js
@@ -189,7 +189,7 @@ ContentPicker.defaultProps = {
 	excludeCurrentPost: true,
 	multiPickedLabel: __('You have selected the following items:', '10up-block-components'),
 	singlePickedLabel: __('You have selected the following item:', '10up-block-components'),
-	fetchInitialResults: true,
+	fetchInitialResults: false,
 };
 
 ContentPicker.propTypes = {

From 2f891d5ecd175b34484bbc9149d787eb6bf66d3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20K=C3=A4gy?= <mail@fabian-kaegy.de>
Date: Wed, 24 May 2023 13:42:53 +0200
Subject: [PATCH 12/12] Update readme.md

---
 components/content-picker/readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/content-picker/readme.md b/components/content-picker/readme.md
index 67ed90ea..53fe7942 100644
--- a/components/content-picker/readme.md
+++ b/components/content-picker/readme.md
@@ -38,7 +38,7 @@ function MyComponent( props ) {
 | `excludeCurrentPost`  | `bool`     | `true`               | Don't allow user to pick the current post. Only applicable on the editor screen.                                                                                                                                                                                                                                                                                                                                       |
 | `content`             | `array`    | `[]`                 | Array of items to pre-populate picker with. Must be in the format of: `[{id: 1, type: 'post', uuid: '...',}, {id: 1, uuid: '...', type: 'page'},... ]`. You cannot provide terms and posts to the same picker. `uuid` was added as of version 1.5.0. It is only used as the React component list key in the admin. If it is not included, `id` will be used which will cause errors if you select the same post twice. |
 | `perPage`             | `number`   | `50`                 | Number of items to show during search
-| `fetchInitialResults` | `bool`     | `true`               | Fetch initial results to present when focusing the search input                                                                                          |                                                                                                                                                                                                                                                                                                                                                                                  |
+| `fetchInitialResults` | `bool`     | `false`               | Fetch initial results to present when focusing the search input                                                                                          |                                                                                                                                                                                                                                                                                                                                                                                  |
 __NOTE:__ Content picker cannot validate that posts you pass it via `content` prop actually exist. If a post does not exist, it will not render as one of the picked items but will still be passed back as picked items if new items are picked/sorted. Therefore, on save you need to validate that all the picked posts/terms actually exist.
 
 The `contentTypes` will get used in a Rest Request to the `search` endpoint as the `subtypes`: