@availity/mui-autocomplete 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.0.1](https://github.com/Availity/element/compare/@availity/mui-autocomplete@1.0.0...@availity/mui-autocomplete@1.0.1) (2025-02-26)
+
+
+### Bug Fixes
+
+* **mui-autocomplete:** refetch on clear ([fdea737](https://github.com/Availity/element/commit/fdea737f76b330a21e36ffd36996da9e83f2d629))
+
 ## [1.0.0](https://github.com/Availity/element/compare/@availity/mui-autocomplete@1.0.0-alpha.0...@availity/mui-autocomplete@1.0.0) (2025-02-25)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -31,12 +31,12 @@ interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, D
         hasMore: boolean;
         offset: number;
     }>;
-    /** Object of parameters used for the cacheKey. Options are re-reftched when a value in the object changes  */
+    /** Object of parameters used for the cacheKey. Options are re-refetched when a value in the object changes  */
     watchParams?: Record<string, unknown>;
     /** Time to wait before searching with the input value typed into the component */
     debounceTimeout?: number;
 }
-declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ loadOptions, limit, queryKey, ListboxProps, queryOptions, watchParams, debounceTimeout, FieldProps, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
+declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ loadOptions, limit, queryKey, ListboxProps, queryOptions, watchParams, debounceTimeout, FieldProps, onInputChange, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 

package/dist/index.d.ts

@@ -31,12 +31,12 @@ interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, D
         hasMore: boolean;
         offset: number;
     }>;
-    /** Object of parameters used for the cacheKey. Options are re-reftched when a value in the object changes  */
+    /** Object of parameters used for the cacheKey. Options are re-refetched when a value in the object changes  */
     watchParams?: Record<string, unknown>;
     /** Time to wait before searching with the input value typed into the component */
     debounceTimeout?: number;
 }
-declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ loadOptions, limit, queryKey, ListboxProps, queryOptions, watchParams, debounceTimeout, FieldProps, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
+declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ loadOptions, limit, queryKey, ListboxProps, queryOptions, watchParams, debounceTimeout, FieldProps, onInputChange, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 

package/dist/index.js

@@ -167,7 +167,8 @@ var AsyncAutocomplete = (_a) => {
     queryOptions,
     watchParams,
     debounceTimeout = 350,
-    FieldProps
+    FieldProps,
+    onInputChange
   } = _b, rest = __objRest(_b, [
     "loadOptions",
     "limit",
@@ -176,10 +177,11 @@ var AsyncAutocomplete = (_a) => {
     "queryOptions",
     "watchParams",
     "debounceTimeout",
-    "FieldProps"
+    "FieldProps",
+    "onInputChange"
   ]);
   const [inputValue, setInputValue] = (0, import_react3.useState)("");
-  const handleInputChange = (event) => {
+  const handleInputPropsOnChange = (event) => {
     var _a2;
     setInputValue(event.target.value);
     if ((_a2 = FieldProps == null ? void 0 : FieldProps.InputProps) == null ? void 0 : _a2.onChange) FieldProps.InputProps.onChange(event);
@@ -194,12 +196,19 @@ var AsyncAutocomplete = (_a) => {
     getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.offset + limit : false
   }, queryOptions));
   const options = (data == null ? void 0 : data.pages) ? data.pages.map((page) => page.options).flat() : [];
+  const handleOnInputChange = (event, value, reason) => {
+    if (reason === "clear") {
+      setInputValue(event.target.value);
+    }
+    if (onInputChange) onInputChange(event, value, reason);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Autocomplete,
     __spreadProps(__spreadValues({}, rest), {
+      onInputChange: handleOnInputChange,
       FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
         InputProps: __spreadProps(__spreadValues({}, FieldProps == null ? void 0 : FieldProps.InputProps), {
-          onChange: handleInputChange
+          onChange: handleInputPropsOnChange
         })
       }),
       loading: isFetching,

package/dist/index.mjs

@@ -131,7 +131,8 @@ var AsyncAutocomplete = (_a) => {
     queryOptions,
     watchParams,
     debounceTimeout = 350,
-    FieldProps
+    FieldProps,
+    onInputChange
   } = _b, rest = __objRest(_b, [
     "loadOptions",
     "limit",
@@ -140,10 +141,11 @@ var AsyncAutocomplete = (_a) => {
     "queryOptions",
     "watchParams",
     "debounceTimeout",
-    "FieldProps"
+    "FieldProps",
+    "onInputChange"
   ]);
   const [inputValue, setInputValue] = useState2("");
-  const handleInputChange = (event) => {
+  const handleInputPropsOnChange = (event) => {
     var _a2;
     setInputValue(event.target.value);
     if ((_a2 = FieldProps == null ? void 0 : FieldProps.InputProps) == null ? void 0 : _a2.onChange) FieldProps.InputProps.onChange(event);
@@ -158,12 +160,19 @@ var AsyncAutocomplete = (_a) => {
     getNextPageParam: (lastPage) => lastPage.hasMore ? lastPage.offset + limit : false
   }, queryOptions));
   const options = (data == null ? void 0 : data.pages) ? data.pages.map((page) => page.options).flat() : [];
+  const handleOnInputChange = (event, value, reason) => {
+    if (reason === "clear") {
+      setInputValue(event.target.value);
+    }
+    if (onInputChange) onInputChange(event, value, reason);
+  };
   return /* @__PURE__ */ jsx2(
     Autocomplete,
     __spreadProps(__spreadValues({}, rest), {
+      onInputChange: handleOnInputChange,
       FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
         InputProps: __spreadProps(__spreadValues({}, FieldProps == null ? void 0 : FieldProps.InputProps), {
-          onChange: handleInputChange
+          onChange: handleInputPropsOnChange
         })
       }),
       loading: isFetching,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-autocomplete",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/AsyncAutocomplete.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { ChipTypeMap } from '@mui/material/Chip';
 import { useInfiniteQuery, UseInfiniteQueryOptions } from '@tanstack/react-query';
+import { AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
 
 import { Autocomplete, AutocompleteProps } from './Autocomplete';
 import { useDebounce } from './util';
@@ -28,7 +29,7 @@ export interface AsyncAutocompleteProps<
   limit?: number;
   /** Config options for the useInfiniteQuery hook */
   queryOptions?: UseInfiniteQueryOptions<{ options: Option[]; hasMore: boolean; offset: number }>;
-  /** Object of parameters used for the cacheKey. Options are re-reftched when a value in the object changes  */
+  /** Object of parameters used for the cacheKey. Options are re-refetched when a value in the object changes  */
   watchParams?: Record<string, unknown>;
   /** Time to wait before searching with the input value typed into the component */
   debounceTimeout?: number;
@@ -49,11 +50,12 @@ export const AsyncAutocomplete = <
   watchParams,
   debounceTimeout = 350,
   FieldProps,
+  onInputChange,
   ...rest
 }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => {
   const [inputValue, setInputValue] = useState('');
 
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputPropsOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(event.target.value);
     // Call passed in onChange if present
     if (FieldProps?.InputProps?.onChange) FieldProps.InputProps.onChange(event);
@@ -71,14 +73,27 @@ export const AsyncAutocomplete = <
 
   const options = data?.pages ? data.pages.map((page) => page.options).flat() : [];
 
+  const handleOnInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    value: string,
+    reason: AutocompleteInputChangeReason
+  ) => {
+    if (reason === 'clear') {
+      setInputValue(event.target.value);
+    }
+
+    if (onInputChange) onInputChange(event, value, reason);
+  };
+
   return (
     <Autocomplete
       {...rest}
+      onInputChange={handleOnInputChange}
       FieldProps={{
         ...FieldProps,
         InputProps: {
           ...FieldProps?.InputProps,
-          onChange: handleInputChange,
+          onChange: handleInputPropsOnChange,
         },
       }}
       loading={isFetching}

package/src/lib/ProviderAutocomplete.test.tsx

@@ -52,4 +52,39 @@ describe('ProviderAutocomplete', () => {
       expect(screen.getByText('No options')).toBeDefined();
     });
   });
+
+  test('should refetch with no inputValue on clear', async () => {
+    const client = new QueryClient();
+
+    render(
+      <QueryClientProvider client={client}>
+        <ProviderAutocomplete customerId="123" FieldProps={{ label: 'Test' }} />
+      </QueryClientProvider>
+    );
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await waitFor(() => {
+      expect(screen.getByText('Provider 0')).toBeDefined();
+    });
+
+    fireEvent.change(input, { target: { value: '21' } });
+
+    await waitFor(() => {
+      expect(screen.getByText('Provider 21')).toBeDefined();
+      expect(() => screen.getByText('Provider 0')).toThrow();
+      fireEvent.click(screen.getByText('Provider 21'));
+    });
+
+    expect(screen.getByTitle('Clear')).toBeDefined();
+    fireEvent.click(screen.getByTitle('Clear'));
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await waitFor(() => {
+      expect(screen.getByText('Provider 0')).toBeDefined();
+    });
+  }, 10000000000);
 });