fix: Fixes property filter count text when token groups are used (#2806)

cloudscape-design · Oct 2, 2024 · 35a8b43 · 35a8b43
1 parent 597c7c5
commit 35a8b43
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/property-filter/__tests__/property-filter.filtering-input.test.tsx b/src/property-filter/__tests__/property-filter.filtering-input.test.tsx
@@ -409,6 +409,15 @@ describe('count text', () => {
     });
     expect(wrapper.findResultsCount()!.getElement()).toHaveTextContent('5 matches');
   });
+
+  test('is visible when there is at least 1 token group', () => {
+    const { propertyFilterWrapper: wrapper } = renderComponent({
+      enableTokenGroups: true,
+      countText: '5 matches',
+      query: { operation: 'or', tokens: [], tokenGroups: [{ propertyKey: 'string', value: 'first', operator: ':' }] },
+    });
+    expect(wrapper.findResultsCount()!.getElement()).toHaveTextContent('5 matches');
+  });
 });
 
 describe('constraint text', () => {

diff --git a/src/property-filter/internal.tsx b/src/property-filter/internal.tsx
@@ -113,7 +113,6 @@ const PropertyFilterInternal = React.forwardRef(
     const i18nStrings = usePropertyFilterI18n(rest.i18nStrings);
 
     useImperativeHandle(ref, () => ({ focus: () => inputRef.current?.focus() }), []);
-    const showResults = !!query.tokens?.length && !disabled && !!countText;
     const [filteringText, setFilteringText] = useState<string>('');
 
     const { internalProperties, internalOptions, internalQuery, internalFreeText } = (() => {
@@ -306,6 +305,9 @@ const PropertyFilterInternal = React.forwardRef(
     const textboxAriaDescribedBy = filteringConstraintText
       ? joinStrings(rest.ariaDescribedby, constraintTextId)
       : rest.ariaDescribedby;
+
+    const showResults = !!internalQuery.tokens?.length && !disabled && !!countText;
+
     return (
       <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>
         <div className={clsx(styles['search-field'], analyticsSelectors['search-field'])}>