Merge pull request #960 from CBIIT/ICDC-3232

Set default expand state, display eclipses only for collapse state
CBIIT · Apr 9, 2024 · ffc05aa · ffc05aa
2 parents 38a1917 + 2553e62
commit ffc05aa
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 16 deletions.
diff --git 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) && (
           <>
             <span
               className={classes.expandBtn}

diff --git a/packages/query-bar/src/generators/QueryBarGenerator.js b/packages/query-bar/src/generators/QueryBarGenerator.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { withStyles, Button } from '@material-ui/core';
 import { InputTypes } from '@bento-core/facet-filter';
 import clsx from 'clsx';
@@ -62,12 +62,6 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
       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) && (
                     <>
                       <span
                         className={classes.expandBtn}