fix: Property filter empty state visible when no properties (#1574)

cloudscape-design · Sep 27, 2023 · cf89e65 · cf89e65
1 parent abdd30c
commit cf89e65
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/pages/property-filter/split-panel-app-layout-integration.page.tsx b/pages/property-filter/split-panel-app-layout-integration.page.tsx
@@ -90,6 +90,7 @@ export default function () {
                 countText={`${items.length} matches`}
                 i18nStrings={i18nStrings}
                 expandToViewport={true}
+                filteringEmpty="No properties"
               />
             }
             columnDefinitions={columnDefinitions.slice(0, 2)}

diff --git a/src/internal/components/autosuggest-input/index.tsx b/src/internal/components/autosuggest-input/index.tsx
@@ -279,7 +279,7 @@ const AutosuggestInput = React.forwardRef(
             />
           }
           onMouseDown={handleDropdownMouseDown}
-          open={open && !!dropdownContent}
+          open={open && (!!dropdownContent || !!dropdownFooter)}
           footer={
             dropdownFooterRef && (
               <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>

diff --git a/src/property-filter/__tests__/property-filter.test.tsx b/src/property-filter/__tests__/property-filter.test.tsx
@@ -88,6 +88,7 @@ const filteringOptions: readonly FilteringOption[] = [
 ];
 
 const defaultProps: PropertyFilterProps = {
+  filteringEmpty: 'Empty',
   filteringProperties,
   filteringOptions,
   filteringPlaceholder: 'Search',
@@ -1002,18 +1003,42 @@ describe('property filter parts', () => {
   });
 
   describe('dropdown states', () => {
-    it('when free text filtering is allowed and no property is matched dropdown is visible but aria-expanded is false', () => {
-      const { propertyFilterWrapper: wrapper } = renderComponent({ disableFreeTextFiltering: false });
+    it('when free text filtering is allowed and no property is matched the dropdown is visible but aria-expanded is false', () => {
+      const { propertyFilterWrapper: wrapper } = renderComponent({
+        disableFreeTextFiltering: false,
+        filteringProperties: [],
+      });
       wrapper.setInputValue('free-text');
       expect(wrapper.findNativeInput().getElement()).toHaveAttribute('aria-expanded', 'false');
       expect(wrapper.findDropdown().findOpenDropdown()!.getElement()).toHaveTextContent('Use: "free-text"');
     });
-    it('when free text filtering is not allowed and no property is matched dropdown is not shown and aria-expanded is false', () => {
-      const { propertyFilterWrapper: wrapper } = renderComponent({ disableFreeTextFiltering: true });
+    it('when free text filtering is not allowed and no property is matched the dropdown is not shown and aria-expanded is false', () => {
+      const { propertyFilterWrapper: wrapper } = renderComponent({
+        disableFreeTextFiltering: true,
+        filteringProperties: [],
+      });
       wrapper.setInputValue('free-text');
       expect(wrapper.findNativeInput().getElement()).toHaveAttribute('aria-expanded', 'false');
       expect(wrapper.findDropdown().findOpenDropdown()).toBe(null);
     });
+    it('when free text filtering is allowed and no properties available the filtering-empty is shown', () => {
+      const { propertyFilterWrapper: wrapper } = renderComponent({
+        disableFreeTextFiltering: false,
+        filteringProperties: [],
+      });
+      wrapper.focus();
+      expect(wrapper.findNativeInput().getElement()).toHaveAttribute('aria-expanded', 'true');
+      expect(wrapper.findDropdown().findOpenDropdown()!.getElement()).toHaveTextContent('Empty');
+    });
+    it('when free text filtering is not allowed and no properties available the filtering-empty is shown', () => {
+      const { propertyFilterWrapper: wrapper } = renderComponent({
+        disableFreeTextFiltering: true,
+        filteringProperties: [],
+      });
+      wrapper.focus();
+      expect(wrapper.findNativeInput().getElement()).toHaveAttribute('aria-expanded', 'true');
+      expect(wrapper.findDropdown().findOpenDropdown()!.getElement()).toHaveTextContent('Empty');
+    });
   });
 
   describe('properties compatibility', () => {

diff --git a/src/property-filter/property-filter-autosuggest.tsx b/src/property-filter/property-filter-autosuggest.tsx
@@ -211,7 +211,7 @@ const PropertyFilterAutosuggest = React.forwardRef(
         dropdownContentKey={customForm ? 'custom' : 'options'}
         dropdownContent={content}
         dropdownFooter={
-          dropdownStatus.isSticky ? (
+          dropdownStatus.isSticky && dropdownStatus.content ? (
             <DropdownFooter
               content={dropdownStatus.content}
               hasItems={autosuggestItemsState.items.length >= 1}