diff --git a/packages/query-bar/src/components/CheckboxFilter.js b/packages/query-bar/src/components/CheckboxFilter.js index b24b1ab7a..ce6720072 100644 --- a/packages/query-bar/src/components/CheckboxFilter.js +++ b/packages/query-bar/src/components/CheckboxFilter.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import clsx from 'clsx'; export default ({ @@ -9,12 +9,6 @@ export default ({ const [expand, setExpand] = useState(true); const noOfItems = expand ? items.length : maxItems; - useEffect(() => { - if (items.length <= maxItems && expand) { - setExpand(!expand); - } - }, [items]); - const clsName = (text = '', attr = '') => `facetSection${text.replace(/\s+/g, '')}${attr}`; return ( @@ -48,7 +42,7 @@ export default ({ {idx === (maxItems - 1) ? null : ' '} ))} - {items.length > maxItems && ( + {(items.length > maxItems && !expand) && ( <> { const [expand, setExpand] = useState(true); const noOfItems = expand ? autocomplete.length : maxItems; - useEffect(() => { - if (autocomplete.length <= maxItems && expand) { - setExpand(!expand); - } - }, [autocomplete]); - // Remove any sections without checkboxes selected const mappedInputs = statusReducer.filter((facet) => facet.section && facet.type) .map((facet) => { @@ -160,7 +154,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => { {idx === (noOfItems - 1) ? null : ' '} ))} - {autocomplete.length > maxItems && ( + {(autocomplete.length > maxItems && !expand) && ( <>