feat(js): display reset button only when query

Author: francoischalifour

packages/autocomplete-js/src/__tests__/autocomplete.test.ts

@@ -82,6 +82,7 @@ describe('autocomplete-js', () => {
               </label>
               <button
                 class="aa-ResetButton"
+                hidden=""
                 type="reset"
               >
                 <svg

packages/autocomplete-js/src/autocomplete.ts

@@ -88,6 +88,35 @@ export function autocomplete<TItem extends BaseItem>({
     };
   });
 
+  runEffect(() => {
+    const panelRoot = getHTMLElement(panelContainer);
+    const state: AutocompleteState<TItem> = {
+      collections: [],
+      completion: null,
+      context: {},
+      isOpen: false,
+      query: '',
+      selectedItemId: null,
+      status: 'idle',
+      ...props.initialState,
+    };
+    render(renderer, {
+      state,
+      ...autocomplete,
+      classNames,
+      panelRoot,
+      root,
+      form,
+      input,
+      inputWrapper,
+      label,
+      panel,
+      resetButton,
+    });
+
+    return () => {};
+  });
+
   runEffect(() => {
     const panelRoot = getHTMLElement(panelContainer);
     const unmountRef = createRef<(() => void) | undefined>(undefined);

packages/autocomplete-js/src/render.ts

@@ -37,10 +37,12 @@ export function render<TItem extends BaseItem>(
     panelRoot,
     root,
     input,
+    resetButton,
     panel,
   }: RenderProps<TItem>
 ): () => void {
-  setPropertiesWithoutEvents(root, getRootProps());
+  setPropertiesWithoutEvents(root, getRootProps({}));
+  setPropertiesWithoutEvents(resetButton, { hidden: !state.query });
   setPropertiesWithoutEvents(input, getInputProps({ inputElement: input }));
 
   panel.innerHTML = '';

packages/autocomplete-js/src/types/index.ts

@@ -145,6 +145,7 @@ export interface AutocompleteOptions<TItem extends BaseItem>
    * ```
    */
   render?: AutocompleteRenderer<TItem>;
+  initialState?: Partial<AutocompleteState<TItem>>;
 }
 
 export interface AutocompleteApi<TItem extends BaseItem>