@centreon/ui 26.11.15 → 26.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.11.15",
+  "version": "26.12.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/InputField/Select/Autocomplete/Connected/index.test.tsx

@@ -8,6 +8,8 @@ import {
   resetMocks,
   waitFor
 } from '../../../../../test/testRenderer';
+import fetchMock from 'jest-fetch-mock';
+
 import buildListingEndpoint from '../../../../api/buildListingEndpoint';
 import type {
   BuildListingEndpointParameters,
@@ -127,4 +129,39 @@ describe(SingleConnectedAutocompleteField, () => {
       );
     });
   });
+
+  it('leaves no request rejected unhandled when it is closed while its options load', async () => {
+    const unhandledRejections: Array<unknown> = [];
+    const onUnhandledRejection = (reason: unknown): void => {
+      unhandledRejections.push(reason);
+    };
+
+    process.on('unhandledRejection', onUnhandledRejection);
+
+    try {
+      // Options that never arrive: the request is still running at unmount,
+      // which cancels it.
+      fetchMock.mockResponse(() => new Promise(() => undefined));
+
+      const { getByLabelText, unmount } =
+        renderSingleConnectedAutocompleteField();
+
+      fireEvent.click(getByLabelText('Open'));
+
+      await waitFor(() => {
+        expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
+      });
+
+      unmount();
+
+      // Unhandled rejections are reported once the microtask queue drains.
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+      });
+
+      expect(unhandledRejections).toEqual([]);
+    } finally {
+      process.off('unhandledRejection', onUnhandledRejection);
+    }
+  });
 });

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -1,6 +1,7 @@
 import { CircularProgress, useTheme } from '@mui/material';
 import type { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';
 
+import { isCancelledError } from '@tanstack/react-query';
 import {
   equals,
   has,
@@ -307,52 +308,62 @@ const ConnectedAutocompleteField = (
     );
 
     const fetchOptionsAndPrefetchNextOptions = useCallback((): void => {
-      fetchQuery().then((newOptions) => {
-        const isError = has('isError', newOptions);
-
-        if (isError) {
-          return;
-        }
-
-        const moreOptions = page > 1 ? options : [];
-
-        const { result, limit, total } = getOptionResult(newOptions);
-
-        const formattedList = changeIdValue
-          ? result.map((item) => ({
-              ...item,
-              id: changeIdValue(item)
-            }))
-          : result;
-
-        if (!isEmpty(labelKey) && !isNil(labelKey)) {
-          const list = formattedList.map((item) =>
-            renameKey({ key: labelKey, newKey: 'name', object: item })
-          );
-          setOptions(moreOptions.concat(list as Array<TData>));
-
-          return;
-        }
-        setOptions(moreOptions.concat(formattedList));
-
-        setOptions(moreOptions.concat(formattedList as Array<TData>));
-
-        const newMaxPage = Math.ceil(total / limit);
-
-        setMaxPage(newMaxPage);
-        if (equals(newMaxPage, page)) {
-          return;
-        }
-
-        prefetchNextPage({
-          getPrefetchQueryKey: (newPage: number) => [
-            `autocomplete-${props.label}`,
-            newPage,
-            searchParameter
-          ],
-          page
+      fetchQuery()
+        .then((newOptions) => {
+          const isError = has('isError', newOptions);
+
+          if (isError) {
+            return;
+          }
+
+          const moreOptions = page > 1 ? options : [];
+
+          const { result, limit, total } = getOptionResult(newOptions);
+
+          const formattedList = changeIdValue
+            ? result.map((item) => ({
+                ...item,
+                id: changeIdValue(item)
+              }))
+            : result;
+
+          if (!isEmpty(labelKey) && !isNil(labelKey)) {
+            const list = formattedList.map((item) =>
+              renameKey({ key: labelKey, newKey: 'name', object: item })
+            );
+            setOptions(moreOptions.concat(list as Array<TData>));
+
+            return;
+          }
+          setOptions(moreOptions.concat(formattedList));
+
+          setOptions(moreOptions.concat(formattedList as Array<TData>));
+
+          const newMaxPage = Math.ceil(total / limit);
+
+          setMaxPage(newMaxPage);
+          if (equals(newMaxPage, page)) {
+            return;
+          }
+
+          prefetchNextPage({
+            getPrefetchQueryKey: (newPage: number) => [
+              `autocomplete-${props.label}`,
+              newPage,
+              searchParameter
+            ],
+            page
+          });
+        })
+        // The request is cancelled when the field unmounts while it loads: there
+        // is nothing left to update, and nothing went wrong.
+        .catch((error) => {
+          if (isCancelledError(error)) {
+            return;
+          }
+
+          throw error;
         });
-      });
     }, [
       changeIdValue,
       fetchQuery,