fix(element-search): remove freesolo and improve typing

src/components/ElementSearchDialog/element-search-dialog.tsx

@@ -5,29 +5,28 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { ReactNode, useCallback, useMemo } from 'react';
-import {
-    Autocomplete,
-    Dialog,
-    DialogContent,
-    TextField,
-    AutocompleteInputChangeReason,
-    AutocompleteChangeReason,
-} from '@mui/material';
+import { HTMLAttributes, ReactNode, useCallback, useMemo } from 'react';
+import { Autocomplete, Dialog, DialogContent, TextField } from '@mui/material';
 import { Search, SearchOff } from '@mui/icons-material';
 import { useIntl } from 'react-intl';
 import { EquipmentInfos } from '../../index';
 import * as React from 'react';
 
-interface ElementSearchDialogProps {
+export type RenderElementProps = HTMLAttributes<HTMLLIElement> & {
+    element: EquipmentInfos;
+    inputValue: string;
+    onClose: () => void;
+};
+
+export interface ElementSearchDialogProps {
     open: boolean;
     onClose: () => void;
     searchingLabel?: string;
     searchTerm: string;
     onSearchTermChange: (searchTerm: string) => void;
     onSelectionChange: (selection: EquipmentInfos) => void;
     elementsFound: EquipmentInfos[];
-    renderElement: (props: any) => ReactNode;
+    renderElement: (props: RenderElementProps) => ReactNode;
     searchTermDisabled?: boolean;
     searchTermDisableReason?: string;
     isLoading: boolean;
@@ -54,9 +53,12 @@ const ElementSearchDialog = (props: ElementSearchDialogProps) => {
 
     const displayedValue = useMemo(() => {
         return searchTermDisabled || searchTermDisableReason
-            ? searchTermDisableReason
-            : searchTerm;
-    }, [searchTerm, searchTermDisabled, searchTermDisableReason]);
+            ? searchTermDisableReason ??
+                  intl.formatMessage({
+                      id: 'element_search/searchDisabled',
+                  })
+            : searchTerm ?? '';
+    }, [searchTermDisabled, searchTermDisableReason, intl, searchTerm]);
 
     const handleClose = useCallback(() => {
         onSearchTermChange('');
@@ -77,60 +79,29 @@ const ElementSearchDialog = (props: ElementSearchDialogProps) => {
                     id="element-search"
                     forcePopupIcon={false}
                     fullWidth
-                    freeSolo
-                    onInputChange={(
-                        _event: React.SyntheticEvent,
-                        value: string,
-                        reason: AutocompleteInputChangeReason
-                    ) => {
-                        // if reason is equal to "reset", it means it programmatically changed (by selecting a result)
-                        // we don't want to change "searchTerm" when clicking a result
+                    onInputChange={(_event, value, reason) => {
                         if (!searchTermDisabled && reason !== 'reset') {
                             onSearchTermChange(value);
                         }
                     }}
-                    onChange={(
-                        _event: React.SyntheticEvent,
-                        newValue: string | EquipmentInfos | null,
-                        reason?: AutocompleteChangeReason
-                    ) => {
+                    onChange={(_event, newValue, reason) => {
                         // when calling this method with reason == "selectOption", newValue can't be null or of type "string", since an option has been clicked on
-                        if (
-                            newValue != null &&
-                            typeof newValue !== 'string' &&
-                            reason === 'selectOption'
-                        ) {
+                        if (newValue !== null && reason === 'selectOption') {
                             onSelectionChange(newValue);
                         }
                     }}
-                    getOptionLabel={(option: EquipmentInfos | string) =>
-                        typeof option === 'string' ? option : option.label
+                    getOptionLabel={(option) => option.label}
+                    isOptionEqualToValue={(option, value) =>
+                        option.id === value.id
                     }
-                    isOptionEqualToValue={(
-                        option: EquipmentInfos | string,
-                        value: EquipmentInfos | string
-                    ) => {
-                        if (
-                            typeof option === 'string' ||
-                            typeof value === 'string'
-                        ) {
-                            return option === value;
-                        } else {
-                            return option.id === value.id;
-                        }
-                    }}
                     options={isLoading ? [] : elementsFound}
                     loading={isLoading}
                     loadingText={loadingText}
                     autoHighlight={true}
                     noOptionsText={intl.formatMessage({
                         id: 'element_search/noResult',
                     })}
-                    renderOption={(
-                        optionProps: any,
-                        element: EquipmentInfos | string,
-                        { inputValue }: { inputValue: string }
-                    ) =>
+                    renderOption={(optionProps, element, { inputValue }) =>
                         renderElement({
                             ...optionProps,
                             element,
@@ -161,7 +132,7 @@ const ElementSearchDialog = (props: ElementSearchDialogProps) => {
                                     </>
                                 ),
                             }}
-                            value={displayedValue ?? ''}
+                            value={displayedValue}
                         />
                     )}
                     disabled={searchTermDisabled}

src/components/translations/element-search-en.ts

@@ -8,6 +8,7 @@
 const element_search_en = {
     'element_search/label': 'Search for an element',
     'element_search/noResult': 'No result',
+    'element_search/searchDisabled': 'Search disabled',
 };
 
 export default element_search_en;

src/components/translations/element-search-fr.ts

@@ -8,6 +8,7 @@
 const element_search_fr = {
     'element_search/label': 'Rechercher un élément',
     'element_search/noResult': 'Aucun résultat',
+    'element_search/searchDisabled': 'Recherche suspendue',
 };
 
 export default element_search_fr;