@availity/mui-autocomplete 2.2.5 → 2.2.6

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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/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/package.json

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

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