@centreon/ui 23.10.31 → 23.10.32-MON-19938-cloud-notifications-fix-search-select-boxes.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.31",
+  "version": "23.10.32-MON-19938-cloud-notifications-fix-search-select-boxes.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
 import { equals, isEmpty, path, split } from 'ramda';
@@ -11,7 +11,12 @@ import {
 } from '../..';
 import MultiConnectedAutocompleteField from '../../InputField/Select/Autocomplete/Connected/Multi';
 
-import { InputPropsWithoutGroup, InputType } from './models';
+import {
+  AutoCompleteChangeData,
+  InputPropsWithoutGroup,
+  InputType,
+  Reason
+} from './models';
 
 const defaultFilterKey = 'name';
 
@@ -29,6 +34,8 @@ const ConnectedAutocomplete = ({
 }: InputPropsWithoutGroup): JSX.Element => {
   const { t } = useTranslation();
 
+  const [autocompleteChangeData, setAutocompleteChangeData] =
+    useState<AutoCompleteChangeData>();
   const { values, touched, errors, setFieldValue, setFieldTouched } =
     useFormikContext<FormikValues>();
 
@@ -55,7 +62,9 @@ const ConnectedAutocomplete = ({
   const fieldNamePath = split('.', fieldName);
 
   const changeAutocomplete = useCallback(
-    (_, value): void => {
+    (_, value, reason: Reason): void => {
+      setAutocompleteChangeData({ reason, value });
+
       if (change) {
         change({ setFieldValue, value });
 
@@ -104,6 +113,7 @@ const ConnectedAutocomplete = ({
   return useMemoComponent({
     Component: (
       <AutocompleteField
+        autocompleteChangeData={autocompleteChangeData}
         dataTestId={dataTestId}
         disableClearable={false}
         disabled={disabled}

package/src/Form/Inputs/models.ts

@@ -103,3 +103,16 @@ export interface Group {
   name: string;
   order: number;
 }
+
+export enum Reason {
+  blur = 'blur',
+  clear = 'clear',
+  createOption = 'createOption',
+  removeOption = 'removeOption',
+  selectOption = 'selectOption'
+}
+
+export interface AutoCompleteChangeData {
+  reason: Reason;
+  value: string;
+}

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

@@ -28,8 +28,10 @@ import {
   SearchParameter
 } from '../../../../api/buildListingEndpoint/models';
 import useFetchQuery from '../../../../api/useFetchQuery';
+import { AutoCompleteChangeData } from '../../../../Form/Inputs/models';
 
 export interface ConnectedAutoCompleteFieldProps<TData> {
+  autocompleteChangeData?: AutoCompleteChangeData;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -55,6 +57,7 @@ const ConnectedAutocompleteField = (
     getRenderedOptionText = (option): string => option.name?.toString(),
     getRequestHeaders,
     displayOptionThumbnail,
+    autocompleteChangeData,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -274,6 +277,13 @@ const ConnectedAutocompleteField = (
       );
     }, useDeepCompare([searchConditions]));
 
+    useEffect(() => {
+      if (!autocompleteChangeData) {
+        return;
+      }
+      setSearchParameter(undefined);
+    }, [autocompleteChangeData?.reason, autocompleteChangeData?.value]);
+
     useEffect(() => {
       if (!optionsOpen) {
         return;