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

Author: aymeric-giraudet

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>

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 });