diff --git a/plugins/woocommerce-admin/client/analytics/report/index.js b/plugins/woocommerce-admin/client/analytics/report/index.js index b9d5230eb33..ee90408cd1d 100644 --- a/plugins/woocommerce-admin/client/analytics/report/index.js +++ b/plugins/woocommerce-admin/client/analytics/report/index.js @@ -145,15 +145,22 @@ export default compose( } const { report } = props.params; - const items = searchItemsByString( select, report, search ); + const searchWords = search.split( ',' ).map( searchWord => searchWord.replace( '%2C', ',' ) ); + const items = searchItemsByString( select, report, searchWords ); const ids = Object.keys( items ); if ( ! ids.length ) { - return {}; + return { + query: { + ...props.query, + search: searchWords, + }, + }; } return { query: { ...props.query, + search: searchWords, [ report ]: ids.join( ',' ), }, }; diff --git a/plugins/woocommerce-admin/client/wc-api/items/utils.js b/plugins/woocommerce-admin/client/wc-api/items/utils.js index 48d87968944..058c04b3b3c 100644 --- a/plugins/woocommerce-admin/client/wc-api/items/utils.js +++ b/plugins/woocommerce-admin/client/wc-api/items/utils.js @@ -7,17 +7,16 @@ /** * Returns items based on a search query. * - * @param {Object} select Instance of @wordpress/select - * @param {String} endpoint Report API Endpoint - * @param {String} search Search strings separated by commas. - * @return {Object} Object Object containing the matching items. + * @param {Object} select Instance of @wordpress/select + * @param {String} endpoint Report API Endpoint + * @param {String[]} search Array of search strings. + * @return {Object} Object containing the matching items. */ export function searchItemsByString( select, endpoint, search ) { const { getItems } = select( 'wc-api' ); - const searchWords = search.split( ',' ); const items = {}; - searchWords.forEach( searchWord => { + search.forEach( searchWord => { const newItems = getItems( endpoint, { search: searchWord, per_page: 10, diff --git a/plugins/woocommerce-admin/packages/components/src/table/index.js b/plugins/woocommerce-admin/packages/components/src/table/index.js index c830069ca39..60c96423564 100644 --- a/plugins/woocommerce-admin/packages/components/src/table/index.js +++ b/plugins/woocommerce-admin/packages/components/src/table/index.js @@ -161,7 +161,9 @@ class TableCard extends Component { onSearch( values ) { const { compareParam } = this.props; - const labels = values.map( v => v.label ); + // A comma is used as a separator between search terms, so we want to escape + // any comma they contain. + const labels = values.map( v => v.label.replace( ',', '%2C' ) ); if ( labels.length ) { updateQueryString( { filter: undefined, @@ -252,8 +254,7 @@ class TableCard extends Component { totalRows, } = this.props; const { selectedRows, showCols } = this.state; - const searchedValues = query.search ? query.search.split( ',' ) : []; - const searchedLabels = searchedValues.map( v => ( { id: v, label: v } ) ); + const searchedLabels = Array.isArray( query.search ) ? query.search.map( v => ( { id: v, label: v } ) ) : []; const allHeaders = this.props.headers; let headers = this.getVisibleHeaders(); let rows = this.getVisibleRows();