fix(rish): hide reset button when search is stalled in SearchBox (#…

…3617)
algolia · Sep 9, 2022 · 93ee9d0 · 93ee9d0
1 parent f7251a4
commit 93ee9d0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/react-instantsearch-hooks-web/src/ui/SearchBox.tsx b/packages/react-instantsearch-hooks-web/src/ui/SearchBox.tsx
@@ -207,7 +207,7 @@ export function SearchBox({
           className={cx('ais-SearchBox-reset', classNames.reset)}
           type="reset"
           title={translations.resetTitle}
-          hidden={value.length === 0 && !isSearchStalled}
+          hidden={value.length === 0 || isSearchStalled}
         >
           <ResetIcon classNames={classNames} />
         </button>

diff --git a/packages/react-instantsearch-hooks-web/src/ui/__tests__/SearchBox.test.tsx b/packages/react-instantsearch-hooks-web/src/ui/__tests__/SearchBox.test.tsx
@@ -349,6 +349,14 @@ describe('SearchBox', () => {
     expect(container.querySelector('.ais-SearchBox-reset')).not.toBeVisible();
   });
 
+  test('with search stalled hides the reset indicator', () => {
+    const props = createProps({ value: 'query', isSearchStalled: true });
+
+    const { container } = render(<SearchBox {...props} />);
+
+    expect(container.querySelector('.ais-SearchBox-reset')).not.toBeVisible();
+  });
+
   test('with search stalled shows the loading indicator', () => {
     const props = createProps({ isSearchStalled: true });