@availity/mui-autocomplete 2.2.5 → 2.2.7

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.2.7](https://github.com/Availity/element/compare/@availity/mui-autocomplete@2.2.6...@availity/mui-autocomplete@2.2.7) (2026-05-27)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `2.2.6`
+* `mui-textfield` updated to version `2.2.6`
+## [2.2.6](https://github.com/Availity/element/compare/@availity/mui-autocomplete@2.2.5...@availity/mui-autocomplete@2.2.6) (2026-03-16)
+
+
+### Bug Fixes
+
+* **mui-autocomplete:** expand scroll check area for asyncautocomplete ([4cc7229](https://github.com/Availity/element/commit/4cc7229871f77afce0a21e5cd8741f3c92c2b721))
+
 ## [2.2.5](https://github.com/Availity/element/compare/@availity/mui-autocomplete@2.2.4...@availity/mui-autocomplete@2.2.5) (2026-03-03)
 
 ### Dependency Updates

package/README.md

@@ -10,7 +10,7 @@
 
 This package extends the MUI Autocomplete component: [MUI Autocomplete Docs](https://mui.com/components/autocomplete/)
 
-Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-autocomplete-introduction--docs)
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-uncontrolled-fields-autocomplete-readme--docs)
 
 Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7)
 

package/dist/index.js

@@ -227,7 +227,7 @@ var AsyncAutocomplete = (_a) => {
   const handleAddingOptions = (event) => __async(null, null, function* () {
     const listboxNode = event.currentTarget;
     const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
-    if (difference <= 5 && !isLoading && !isFetching && hasNextPage) {
+    if (difference <= 10 && !isLoading && !isFetching && hasNextPage) {
       fetchNextPage();
     }
   });

package/dist/index.mjs

@@ -185,7 +185,7 @@ var AsyncAutocomplete = (_a) => {
   const handleAddingOptions = (event) => __async(null, null, function* () {
     const listboxNode = event.currentTarget;
     const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
-    if (difference <= 5 && !isLoading && !isFetching && hasNextPage) {
+    if (difference <= 10 && !isLoading && !isFetching && hasNextPage) {
       fetchNextPage();
     }
   });

package/introduction.mdx

@@ -2,7 +2,7 @@ import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 import ReadMe from './README.md?raw';
 import CHANGELOG from './CHANGELOG.md?raw';
 
-<Meta title="Form Components/Autocomplete/Introduction" />
+<Meta title="Form Components/Uncontrolled Fields/Autocomplete/README" />
 
 <Markdown>{ReadMe}</Markdown>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-autocomplete",
-  "version": "2.2.5",
+  "version": "2.2.7",
   "description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -8,7 +8,7 @@
     "availity",
     "mui"
   ],
-  "homepage": "https://availity.github.io/element/?path=/docs/form-components-autocomplete-introduction--docs",
+  "homepage": "https://availity.github.io/element/?path=/docs/form-components-uncontrolled-fields-autocomplete-readme--docs",
   "bugs": {
     "url": "https://github.com/Availity/element/issues"
   },
@@ -45,10 +45,10 @@
     "qs": "^6.15.0"
   },
   "devDependencies": {
-    "@availity/api-axios": "^12.0.4",
-    "@availity/mui-form-utils": "^2.0.5",
+    "@availity/api-axios": "^12.2.1",
+    "@availity/mui-form-utils": "^2.0.6",
     "@availity/mui-icon": "^2.1.0",
-    "@availity/mui-textfield": "^2.0.5",
+    "@availity/mui-textfield": "^2.0.6",
     "@mui/material": "^7.3.4",
     "@tanstack/react-query": "^4.36.1",
     "react": "19.2.0",
@@ -58,8 +58,8 @@
   },
   "peerDependencies": {
     "@availity/api-axios": "^12.0.0",
-    "@availity/mui-form-utils": "^2.0.5",
-    "@availity/mui-textfield": "^2.0.5",
+    "@availity/mui-form-utils": "^2.0.6",
+    "@availity/mui-textfield": "^2.0.6",
     "@mui/material": "^7.0.0",
     "@tanstack/react-query": "^4.36.1",
     "react": ">=17.0.0"

package/src/lib/AsyncAutocomplete.stories.tsx

@@ -6,7 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AsyncAutocomplete } from './AsyncAutocomplete';
 
 const meta: Meta<typeof AsyncAutocomplete> = {
-  title: 'Form Components/Autocomplete/AsyncAutocomplete',
+  title: 'Form Components/Uncontrolled Fields/AsyncAutocomplete',
   component: AsyncAutocomplete,
   tags: ['autodocs'],
   args: {

package/src/lib/AsyncAutocomplete.test.tsx

@@ -5,6 +5,7 @@ import { server } from '@availity/mock/src/lib/server';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { AsyncAutocomplete } from './AsyncAutocomplete';
+import { mock } from 'node:test';
 
 const api = new AvApi({ name: 'example' } as ApiConfig);
 
@@ -182,63 +183,85 @@ describe('AsyncAutocomplete', () => {
     });
   });
 
-  // test('should call loadOptions when scroll to the bottom', async () => {
-  //   const client = new QueryClient();
-
-  //   render(
-  //     <QueryClientProvider client={client}>
-  //       <AsyncAutocomplete queryKey="test2" loadOptions={loadOptions} limit={10} FieldProps={{ label: 'Test' }} ListboxProps={{style: {maxHeight: '100px'}}} />
-  //     </QueryClientProvider>
-  //   );
-
-  //   const input = screen.getByRole('combobox');
-  //   fireEvent.click(input);
-  //   fireEvent.keyDown(input, { key: 'ArrowDown' });
-
-  //   await waitFor(() => {
-  //     expect(screen.getByText('Option 0')).toBeDefined();
-  //     expect(() => screen.getByText('Option 10')).toThrow();
-  //   });
-
-  //   await act(async () => {
-  //     const options = await screen.findByRole('listbox');
-  //     fireEvent.scroll(options, { target: { scrollTop: options.scrollHeight } });
-  //   });
-
-  //   await waitFor(() => {
-  //     expect(screen.getByText('Option 10')).toBeDefined();
-  //     expect(() => screen.getByText('Option 20')).toThrow();
-  //   });
-  // });
-
-  // test('should call loadOptions when mouse enters the listbox if not enough options for scroll', async () => {
-  //   const client = new QueryClient();
-
-  //   render(
-  //     <QueryClientProvider client={client}>
-  //       <AsyncAutocomplete queryKey="test2" loadOptions={loadOptions} limit={5} FieldProps={{ label: 'Test' }} ListboxProps={{style: {maxHeight: '150px'}}} />
-  //     </QueryClientProvider>
-  //   );
-
-  //   const input = screen.getByRole('combobox');
-  //   fireEvent.click(input);
-  //   fireEvent.keyDown(input, { key: 'ArrowDown' });
-
-  //   await waitFor(() => {
-  //     expect(screen.getByText('Option 0')).toBeDefined();
-  //     expect(() => screen.getByText('Option 5')).toThrow();
-  //   });
-
-  //   await act(async () => {
-  //     const options = await screen.findByRole('listbox');
-  //     fireEvent.mouseEnter(options);
-  //   });
-
-  //   await waitFor(() => {
-  //     expect(screen.getByText('Option 5')).toBeDefined();
-  //     expect(() => screen.getByText('Option 10')).toThrow();
-  //   });
-  // });
+  test('should call loadOptions when scroll to the bottom', async () => {
+    const mockLoadOptions = jest.fn(loadOptions);
+    const client = new QueryClient();
+
+    render(
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete queryKey="test-loadoptions-scroll" loadOptions={mockLoadOptions} limit={10} FieldProps={{ label: 'Test' }} />
+      </QueryClientProvider>
+    );
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowUp' });
+
+    const listbox = await screen.findByRole('listbox');
+    Object.defineProperty(listbox, 'scrollHeight', { value: 500, writable: true });
+    Object.defineProperty(listbox, 'clientHeight', { value: 100, writable: true });
+    Object.defineProperty(listbox, 'scrollTop', { value: 0, writable: true });
+
+    // wait for no-scroll loading fallback to finish before testing scroll behavior
+    await waitFor(() => expect(() => screen.getByAltText('Loading')).toThrow());
+    const initialCallCount = mockLoadOptions.mock.calls.length;
+
+    fireEvent.scroll(listbox, { target: { scrollTop: 200 } });
+
+    // should not loadOptions since not scrolled to bottom
+    await waitFor(() => {
+      expect(mockLoadOptions).toHaveBeenCalledTimes(initialCallCount);
+    });
+
+    fireEvent.scroll(listbox, { target: { scrollTop: 400 } });
+
+    await waitFor(() => {
+      expect(mockLoadOptions).toHaveBeenCalledTimes(initialCallCount + 1);
+    });
+  });
+
+  test('should call loadOptions if more options available and not enough options for scroll', async () => {
+    const mockLoadOptions = jest.fn(loadOptions);
+    const client = new QueryClient();
+
+    render(
+      <QueryClientProvider client={client}>
+        <AsyncAutocomplete
+          queryKey="test-loadOptions-noscroll"
+          loadOptions={mockLoadOptions}
+          limit={5}
+          FieldProps={{ label: 'Test' }}
+        />
+      </QueryClientProvider>
+    );
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await waitFor(() => {
+      expect(mockLoadOptions).toHaveBeenCalled();
+    });
+
+    // should load more options until enough options for scroll or no more options to load
+    const listbox = await screen.findByRole('listbox');
+    Object.defineProperty(listbox, 'scrollHeight', { value: 500, writable: true });
+    Object.defineProperty(listbox, 'clientHeight', { value: 100, writable: true });
+    Object.defineProperty(listbox, 'scrollTop', { value: 0, writable: true });
+
+    await waitFor(() => expect(() => screen.getByAltText('Loading')).toThrow());
+
+    // count number of calls before satisfying scrollable condition
+    const maxCallCount = mockLoadOptions.mock.calls.length;
+
+    fireEvent.pointerEnter(listbox);
+
+    // should not fallback to load more options as scrollable condition is satisfied
+    await waitFor(() => {
+      expect(mockLoadOptions).toHaveBeenCalledTimes(maxCallCount);
+    });
+  });
+
 
   test('should search with input value', async () => {
     const mockLoadOptions = jest.fn(async () => ({ options: [{ label: 'Option 1' }], hasMore: false, offset: 50 }));

package/src/lib/AsyncAutocomplete.tsx

@@ -112,7 +112,7 @@ export const AsyncAutocomplete = <
     const difference = listboxNode.scrollHeight - (listboxNode.scrollTop + listboxNode.clientHeight);
 
     // Only fetch if we are near the bottom, not already fetching, and there are more results
-    if (difference <= 5 && !isLoading && !isFetching && hasNextPage) {
+    if (difference <= 10 && !isLoading && !isFetching && hasNextPage) {
       fetchNextPage();
     }
   }
@@ -142,7 +142,7 @@ export const AsyncAutocomplete = <
         ...ListboxProps,
         ref: setListboxRef,
         onScroll: handleAddingOptions,
-        onPointerEnter: handleAddingOptions,
+        onPointerEnter: handleAddingOptions
       }}
     />
   );

package/src/lib/Autocomplete.stories.tsx

@@ -31,7 +31,7 @@ const languages = [
 ];
 
 const meta: Meta<typeof Autocomplete> = {
-  title: 'Form Components/Autocomplete/Autocomplete',
+  title: 'Form Components/Uncontrolled Fields/Autocomplete',
   component: Autocomplete,
   tags: ['autodocs'],
   args: {
@@ -72,7 +72,7 @@ export const _Multi: StoryObj<typeof Autocomplete> = {
 };
 
 /** Notice the new `read-only` styling. We're moving away from `disabled` in favor of `read-only`.
- * _See the [Disabled Fields Explainer](./?path=/docs/bs4-migration-form-migration--disabled-fields) for more information on when to use each._
+ * _See the [Disabled Fields Explainer](./?path=/docs/upgrading/bs4-migration-form-migration--disabled-fields) for more information on when to use each._
 */
 export const _States: StoryObj<typeof Autocomplete> = {
   render: (args) => (
@@ -196,7 +196,7 @@ export const _Grouped: StoryObj<typeof Autocomplete> = {
   },
 };
 
-/** Wrap the fields in a `SearchByFormGroup` from the [@availity/mui-form-utils](./?path=/docs/form-components-formutils-introduction--docs) package for our combined search by styles.
+/** Wrap the fields in a `SearchByFormGroup` from the [@availity/mui-form-utils](./?path=/docs/form-components-uncontrolled-formutils-readme--docs) package for our combined search by styles.
  *
  * The "Search By" field id must be passed as the FormGroup supplies the label.
  */

package/src/lib/CodesAutocomplete.stories.tsx

@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { CodesAutocomplete } from './CodesAutocomplete';
 
 const meta: Meta<typeof CodesAutocomplete> = {
-  title: 'Form Components/Autocomplete/CodesAutocomplete',
+  title: 'Form Components/Uncontrolled Fields/CodesAutocomplete',
   component: CodesAutocomplete,
   tags: ['autodocs'],
   args: {

package/src/lib/OrganizationAutocomplete.stories.tsx

@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { OrganizationAutocomplete } from './OrganizationAutocomplete';
 
 const meta: Meta<typeof OrganizationAutocomplete> = {
-  title: 'Form Components/Autocomplete/OrganizationAutocomplete',
+  title: 'Form Components/Uncontrolled Fields/OrganizationAutocomplete',
   component: OrganizationAutocomplete,
   tags: ['autodocs'],
   args: {

package/src/lib/ProviderAutocomplete.stories.tsx

@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ProviderAutocomplete } from './ProviderAutocomplete';
 
 const meta: Meta<typeof ProviderAutocomplete> = {
-  title: 'Form Components/Autocomplete/ProviderAutocomplete',
+  title: 'Form Components/Uncontrolled Fields/ProviderAutocomplete',
   component: ProviderAutocomplete,
   tags: ['autodocs'],
   args: {