From cf89e65c7c0fc5006bd6b0085fb4dae82637cb98 Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Wed, 27 Sep 2023 15:13:34 +0200
Subject: [PATCH] fix: Property filter empty state visible when no properties
 (#1574)

---
 ...plit-panel-app-layout-integration.page.tsx |  1 +
 .../components/autosuggest-input/index.tsx    |  2 +-
 .../__tests__/property-filter.test.tsx        | 33 ++++++++++++++++---
 .../property-filter-autosuggest.tsx           |  2 +-
 4 files changed, 32 insertions(+), 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
index ded3101fa8..c320196b81 100644
--- 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
index ebecdca5db..8a4d1fcbe6 100644
--- 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
index 843743259b..ff4cf3acd6 100644
--- 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
index 3ab84fa067..b8fd24fc08 100644
--- 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}