@mtes-mct/monitor-ui 6.3.2 → 6.4.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [6.3.3](https://github.com/MTES-MCT/monitor-ui/compare/v6.3.2...v6.3.3) (2023-05-25)
+
+
+### Bug Fixes
+
+* **fields:** control options internally with customSearch in Select & MultiSelect ([251ad18](https://github.com/MTES-MCT/monitor-ui/commit/251ad188dbc388c6efcaa1e2bf0afdd0ba343a65))
+* **fields:** reset controlled rsuite data on change with customSearch in MultiSelect ([b96b6d5](https://github.com/MTES-MCT/monitor-ui/commit/b96b6d5eb0e3e00170449ec5df0615ee7c6cea96))
+
+## [6.3.2](https://github.com/MTES-MCT/monitor-ui/compare/v6.3.1...v6.3.2) (2023-05-25)
+
+
+### Bug Fixes
+
+* **libs:** make CustomSearch fully functional ([931dda0](https://github.com/MTES-MCT/monitor-ui/commit/931dda03e79ba3710d9ae0d14a45305e0c57b819))
+
 ## [6.3.1](https://github.com/MTES-MCT/monitor-ui/compare/v6.3.0...v6.3.1) (2023-05-24)
 
 

package/fields/MultiSelect.d.ts

@@ -6,6 +6,8 @@ export type MultiSelectProps<OptionValue extends OptionValueType = string> = Omi
     /** Used to pass something else than `window.document` as a base container to attach global events listeners. */
     baseContainer?: Document | HTMLDivElement | null | undefined;
     customSearch?: CustomSearch<Option<OptionValue>> | undefined;
+    /** Minimum search query length required to trigger custom search filtering. */
+    customSearchMinQueryLength?: number | undefined;
     error?: string | undefined;
     isErrorMessageHidden?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
@@ -18,4 +20,4 @@ export type MultiSelectProps<OptionValue extends OptionValueType = string> = Omi
     options: Option<OptionValue>[];
     value?: OptionValue[] | undefined;
 };
-export declare function MultiSelect<OptionValue extends OptionValueType = string>({ baseContainer, customSearch, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: MultiSelectProps<OptionValue>): JSX.Element;
+export declare function MultiSelect<OptionValue extends OptionValueType = string>({ baseContainer, customSearch, customSearchMinQueryLength, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: MultiSelectProps<OptionValue>): JSX.Element;

package/fields/Search.d.ts

@@ -1,4 +1,5 @@
 import { type ElementType } from 'react';
+import type { CustomSearch } from '../libs/CustomSearch';
 import type { Option, OptionValueType } from '../types';
 import type { AutoCompleteProps as RsuiteAutoCompleteProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
@@ -6,6 +7,9 @@ export type SearchProps<OptionValue extends OptionValueType = string> = Omit<Rsu
     MenuItem?: ElementType | undefined;
     /** Used to pass something else than `window.document` as a base container to attach global events listeners. */
     baseContainer?: Document | HTMLDivElement | null | undefined;
+    customSearch?: CustomSearch<Option<OptionValue>> | undefined;
+    /** Minimum search query length required to trigger custom search filtering. */
+    customSearchMinQueryLength?: number | undefined;
     error?: string | undefined;
     isErrorMessageHidden?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
@@ -19,4 +23,4 @@ export type SearchProps<OptionValue extends OptionValueType = string> = Omit<Rsu
     options?: Option<OptionValue>[];
     value?: OptionValue | undefined;
 };
-export declare function Search<OptionValue extends OptionValueType = string>({ baseContainer, className, error, isErrorMessageHidden, isLabelHidden, isLight, isSearchIconVisible, label, MenuItem, onChange, onQuery, options, optionValueKey, value, ...originalProps }: SearchProps<OptionValue>): JSX.Element;
+export declare function Search<OptionValue extends OptionValueType = string>({ baseContainer, className, customSearch, customSearchMinQueryLength, error, isErrorMessageHidden, isLabelHidden, isLight, isSearchIconVisible, label, MenuItem, onChange, onQuery, options, optionValueKey, value, ...originalProps }: SearchProps<OptionValue>): JSX.Element;

package/fields/Select.d.ts

@@ -6,6 +6,8 @@ export type SelectProps<OptionValue extends OptionValueType = string> = Omit<Sel
     /** Used to pass something else than `window.document` as a base container to attach global events listeners. */
     baseContainer?: Document | HTMLDivElement | null | undefined;
     customSearch?: CustomSearch<Option<OptionValue>> | undefined;
+    /** Minimum search query length required to trigger custom search filtering. */
+    customSearchMinQueryLength?: number | undefined;
     error?: string | undefined;
     isCleanable?: boolean | undefined;
     isErrorMessageHidden?: boolean | undefined;
@@ -19,4 +21,4 @@ export type SelectProps<OptionValue extends OptionValueType = string> = Omit<Sel
     options: Option<OptionValue>[];
     value?: OptionValue | undefined;
 };
-export declare function Select<OptionValue extends OptionValueType = string>({ baseContainer, customSearch, disabled, error, isCleanable, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: SelectProps<OptionValue>): JSX.Element;
+export declare function Select<OptionValue extends OptionValueType = string>({ baseContainer, customSearch, customSearchMinQueryLength, disabled, error, isCleanable, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: SelectProps<OptionValue>): JSX.Element;

package/index.js

@@ -20739,9 +20739,11 @@ function normalizeString(text) {
     return cleanText.length > 0 ? cleanText : undefined;
 }
 
-function Search({ baseContainer, className, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconVisible = true, label, MenuItem, onChange, onQuery, options = [], optionValueKey, value, ...originalProps }) {
+function Search({ baseContainer, className, customSearch = undefined, customSearchMinQueryLength = 1, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconVisible = true, label, MenuItem, onChange, onQuery, options = [], optionValueKey, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
+    /** Instance of `CustomSearch` */
+    const customSearchRef = useRef(customSearch);
     const queryRef = useRef(undefined);
     const data = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const [isOpen, setIsOpen] = useState(false);
@@ -20752,6 +20754,8 @@ function Search({ baseContainer, className, error, isErrorMessageHidden = false,
     const key = useKey([value, originalProps.disabled, originalProps.name]);
     const rsuiteValue = useMemo(() => getRsuiteValueFromOptionValue(value, optionValueKey), [value, optionValueKey]);
     const [inputValue, setInputValue] = useState(rsuiteValue);
+    // Only used when `customSearch` prop is set
+    const [controlledRsuiteData, setControlledRsuiteData] = useState(customSearch ? data : undefined);
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
@@ -20763,6 +20767,12 @@ function Search({ baseContainer, className, error, isErrorMessageHidden = false,
         if (!(typeof nextQuery === 'string')) {
             return;
         }
+        if (customSearch && customSearchRef.current) {
+            const nextControlledRsuiteData = nextQuery.trim().length >= customSearchMinQueryLength
+                ? getRsuiteDataFromOptions(customSearchRef.current.find(nextQuery), optionValueKey)
+                : data;
+            setControlledRsuiteData(nextControlledRsuiteData);
+        }
         queryRef.current = normalizeString(nextQuery);
         if (event.type === 'change') {
             setInputValue(nextQuery);
@@ -20777,7 +20787,7 @@ function Search({ baseContainer, className, error, isErrorMessageHidden = false,
         if (onQuery) {
             onQuery(queryRef.current);
         }
-    }, [onChange, onQuery]);
+    }, [customSearch, onChange, onQuery, data, customSearchMinQueryLength, optionValueKey]);
     const handleSelect = useCallback((_, item) => {
         if (onChange) {
             onChange(item.optionValue);
@@ -20789,7 +20799,13 @@ function Search({ baseContainer, className, error, isErrorMessageHidden = false,
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: controlledClassName, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$c, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: data, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, open: isOpen, renderMenuItem: (itemLabel, item) => MenuItem ? jsx(MenuItem, { item: item.value }) : itemLabel, value: inputValue, ...originalProps }, key)), inputValue && (jsxs(Fragment, { children: [jsx(StyledCloseButton, { accent: Accent.TERTIARY, color: THEME.color.slateGray, Icon: Close, isSearchIconVisible: isSearchIconVisible, onClick: clean, size: Size.SMALL }), isSearchIconVisible && jsx(Separator, { children: "|" })] })), isSearchIconVisible && jsx(StyledIconSearch, { color: THEME.color.slateGray, size: 20 })] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: controlledClassName, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$c, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, 
+                        // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
+                        // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
+                        data: controlledRsuiteData || data, 
+                        // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
+                        // that's why we send this "always true" filter to disable Rsuite SelectPicker internal search filtering
+                        filterBy: (customSearch ? () => true : undefined), id: originalProps.name, onChange: handleChange, onSelect: handleSelect, open: isOpen, renderMenuItem: (itemLabel, item) => MenuItem ? jsx(MenuItem, { item: item.value }) : itemLabel, value: inputValue, ...originalProps }, key)), inputValue && (jsxs(Fragment, { children: [jsx(StyledCloseButton, { accent: Accent.TERTIARY, color: THEME.color.slateGray, Icon: Close, isSearchIconVisible: isSearchIconVisible, onClick: clean, size: Size.SMALL }), isSearchIconVisible && jsx(Separator, { children: "|" })] })), isSearchIconVisible && jsx(StyledIconSearch, { color: THEME.color.slateGray, size: 20 })] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledCloseButton = styled(IconButton) `
   cursor: pointer;
@@ -20812,7 +20828,7 @@ const StyledAutoComplete = styled(AutoComplete) `
   font-size: 13px;
   flex-grow: 1;
 
-  > input {
+  .rs-input {
     background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
     border-width: 0 0 1px;
     border-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -20824,7 +20840,11 @@ const StyledAutoComplete = styled(AutoComplete) `
 
     :focus {
       outline: unset;
-      border-color: ${p => p.theme.color.blueGray['100']};
+      border-color: transparent;
+    }
+    :hover {
+      outline: unset;
+      border-color: transparent;
     }
   }
 `;
@@ -25681,47 +25701,19 @@ class CustomSearch {
     }
 }
 
-function MultiSelect({ baseContainer, customSearch, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
+function MultiSelect({ baseContainer, customSearch, customSearchMinQueryLength = 1, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
-    /**
-     * Current list of option labels found by `CustomSearch.find()` for the current select search query
-     *
-     * @description
-     * `undefined` means that search query is empty, thus all labels should be a match.
-     */
-    const customSearchLabelMatchesRef = useRef(undefined);
     /** Instance of `CustomSearch` */
     const customSearchRef = useRef(customSearch);
-    /** Last search query (only used when `customSearch` prop is set) */
-    const previousSearchQueryRef = useRef('');
-    const [isOpen, setIsOpen] = useState(false);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const rsuiteData = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useKey([disabled, originalProps.name, value]);
     const selectedRsuiteValue = useMemo(() => (value || []).map(valueItem => getRsuiteValueFromOptionValue(valueItem, optionValueKey)), [optionValueKey, value]);
-    const searchBy = useMemo(() => 
-    // Since this function is called by a `.filter()` in Rsuite,
-    // we first prepare `CustomSearch` results in `handleSearch()` (called each time the search query changes),
-    // and we use the `customSearchLabelMatches` ref-stored results, in the form of option labels,
-    // to check if the current option label is part of these results.
-    // Note that options label are expected to be unique in order for this pattern to work.
-    customSearchRef.current
-        ? (query, _label, item) => {
-            if (!customSearchRef.current) {
-                throw new Error('`customSearchRef.current` is undefined.');
-            }
-            // Since this function will be called xN times, N being the number of options,
-            // we only want to update found option labels once each time the search query changes.
-            if (query !== previousSearchQueryRef.current) {
-                const nextCustomSearchLabelMatches = query.trim().length > 0 ? customSearchRef.current.find(query).map(option => option.label) : undefined;
-                customSearchLabelMatchesRef.current = nextCustomSearchLabelMatches;
-                previousSearchQueryRef.current = query;
-            }
-            return customSearchLabelMatchesRef.current ? customSearchLabelMatchesRef.current.includes(item.label) : true;
-        }
-        : undefined, []);
+    // Only used when `customSearch` prop is set
+    const [controlledRsuiteData, setControlledRsuiteData] = useState(customSearch ? rsuiteData : undefined);
+    const [isOpen, setIsOpen] = useState(false);
     const { forceUpdate } = useForceUpdate();
     const close = useCallback(() => {
         setIsOpen(false);
@@ -25738,8 +25730,18 @@ function MultiSelect({ baseContainer, customSearch, disabled = false, error, isE
         }
         const nextValue = nextOptionRsuiteValues ? getOptionValuesFromRsuiteDataValues(nextOptionRsuiteValues) : [];
         const normalizedNextValue = nextValue.length > 0 ? nextValue : undefined;
+        setControlledRsuiteData(rsuiteData);
         onChange(normalizedNextValue);
-    }, [getOptionValuesFromRsuiteDataValues, onChange]);
+    }, [getOptionValuesFromRsuiteDataValues, onChange, rsuiteData]);
+    const handleSearch = useCallback((nextQuery) => {
+        if (!customSearchRef.current || nextQuery.trim().length < customSearchMinQueryLength) {
+            return;
+        }
+        const nextControlledRsuiteData = nextQuery.trim().length >= customSearchMinQueryLength
+            ? getRsuiteDataFromOptions(customSearchRef.current.find(nextQuery), optionValueKey)
+            : rsuiteData;
+        setControlledRsuiteData(nextControlledRsuiteData);
+    }, [customSearchMinQueryLength, optionValueKey, rsuiteData]);
     const renderMenuItem = useCallback((node) => jsx("span", { title: String(node), children: String(node) }), []);
     const toggle = useCallback((event) => {
         let targetElement = event.target;
@@ -25759,7 +25761,13 @@ function MultiSelect({ baseContainer, customSearch, disabled = false, error, isE
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: "Field-MultiSelect", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$4, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, data: rsuiteData, disabled: disabled, id: originalProps.name, onChange: handleChange, onClick: toggle, open: isOpen, renderMenuItem: renderMenuItem, searchable: !!customSearch || searchable, searchBy: searchBy, value: selectedRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: "Field-MultiSelect", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$4, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, 
+                    // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
+                    // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
+                    data: controlledRsuiteData || rsuiteData, disabled: disabled, id: originalProps.name, onChange: handleChange, onClick: toggle, onSearch: handleSearch, open: isOpen, renderMenuItem: renderMenuItem, searchable: !!customSearch || searchable, 
+                    // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
+                    // that's why we send this "always true" filter to disable Rsuite TagPicker internal search filtering
+                    searchBy: (customSearch ? () => true : undefined), value: selectedRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const Box$4 = styled.div `
   position: relative;
@@ -34943,48 +34951,20 @@ const StyledFieldset = styled(Fieldset) `
   }
 `;
 
-function Select({ baseContainer, customSearch, disabled = false, error, isCleanable = true, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
+function Select({ baseContainer, customSearch, customSearchMinQueryLength = 1, disabled = false, error, isCleanable = true, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
-    /**
-     * Current list of option labels found by `CustomSearch.find()` for the current select search query
-     *
-     * @description
-     * `undefined` means that search query is empty, thus all labels should be a match.
-     */
-    const customSearchLabelMatchesRef = useRef(undefined);
     /** Instance of `CustomSearch` */
     const customSearchRef = useRef(customSearch);
-    /** Last search query (only used when `customSearch` prop is set) */
-    const previousSearchQueryRef = useRef('');
-    const [isOpen, setIsOpen] = useState(false);
     const { forceUpdate } = useForceUpdate();
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const rsuiteData = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useKey([disabled, originalProps.name, value]);
     const selectedRsuiteValue = useMemo(() => getRsuiteValueFromOptionValue(value, optionValueKey), [value, optionValueKey]);
-    const searchBy = useMemo(() => 
-    // Since this function is called by a `.filter()` in Rsuite,
-    // we first prepare `CustomSearch` results in `handleSearch()` (called each time the search query changes),
-    // and we use the `customSearchLabelMatches` ref-stored results, in the form of option labels,
-    // to check if the current option label is part of these results.
-    // Note that options label are expected to be unique in order for this pattern to work.
-    customSearchRef.current
-        ? (query, _label, item) => {
-            if (!customSearchRef.current) {
-                throw new Error('`customSearchRef.current` is undefined.');
-            }
-            // Since this function will be called xN times, N being the number of options,
-            // we only want to update found option labels once each time the search query changes.
-            if (query !== previousSearchQueryRef.current) {
-                const nextCustomSearchLabelMatches = query.trim().length > 0 ? customSearchRef.current.find(query).map(option => option.label) : undefined;
-                customSearchLabelMatchesRef.current = nextCustomSearchLabelMatches;
-                previousSearchQueryRef.current = query;
-            }
-            return customSearchLabelMatchesRef.current ? customSearchLabelMatchesRef.current.includes(item.label) : true;
-        }
-        : undefined, []);
+    // Only used when `customSearch` prop is set
+    const [controlledRsuiteData, setControlledRsuiteData] = useState(customSearch ? rsuiteData : undefined);
+    const [isOpen, setIsOpen] = useState(false);
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
@@ -34994,6 +34974,15 @@ function Select({ baseContainer, customSearch, disabled = false, error, isCleana
         }
         onChange(undefined);
     }, [onChange]);
+    const handleSearch = useCallback((nextQuery) => {
+        if (!customSearchRef.current || nextQuery.trim().length < customSearchMinQueryLength) {
+            return;
+        }
+        const nextControlledRsuiteData = nextQuery.trim().length >= customSearchMinQueryLength
+            ? getRsuiteDataFromOptions(customSearchRef.current.find(nextQuery), optionValueKey)
+            : rsuiteData;
+        setControlledRsuiteData(nextControlledRsuiteData);
+    }, [customSearchMinQueryLength, optionValueKey, rsuiteData]);
     const handleSelect = useCallback((_, selectedItem) => {
         close();
         if (onChange) {
@@ -35021,10 +35010,16 @@ function Select({ baseContainer, customSearch, disabled = false, error, isCleana
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: "Field-Select", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, cleanable: isCleanable, container: boxRef.current, data: rsuiteData, disabled: disabled, id: originalProps.name, onClean: handleClean, 
+    return (jsxs(Field$2, { className: "Field-Select", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, cleanable: isCleanable, container: boxRef.current, 
+                    // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
+                    // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
+                    data: controlledRsuiteData || rsuiteData, disabled: disabled, id: originalProps.name, onClean: handleClean, onSearch: handleSearch, 
                     // `as any` because we customized `ItemDataType` type by adding `optionValue`,
                     // which generates an optional vs required type conflict
-                    onSelect: handleSelect, open: isOpen, renderMenuItem: renderMenuItem, searchable: !!customSearch || searchable, searchBy: searchBy, value: selectedRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+                    onSelect: handleSelect, open: isOpen, renderMenuItem: renderMenuItem, searchable: !!customSearch || searchable, 
+                    // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
+                    // that's why we send this "always true" filter to disable Rsuite SelectPicker internal search filtering
+                    searchBy: (customSearch ? () => true : undefined), value: selectedRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledSelectPicker = styled(SelectPicker) `
   > .rs-picker-toggle {
@@ -35190,20 +35185,17 @@ const InputBox = styled.div `
 
 function FormikSearch({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(Search, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(Search, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikCheckbox({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
@@ -35211,56 +35203,49 @@ function FormikCheckbox({ name, ...originalProps }) {
     // A checkbox must initialize its Formik value on mount:
     // it wouldn't make sense to keep it as `undefined` since `undefined` means `false` in the case of a checkbox
     useEffect(() => {
-        helpers.setTouched(true);
         helpers.setValue(isChecked);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(Checkbox, { checked: isChecked, error: error, name: name, onChange: handleChange, ...originalProps });
+    return jsx(Checkbox, { checked: isChecked, error: meta.error, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikCoordinatesInput({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(CoordinatesInput, { defaultValue: defaultValue, error: error, onChange: handleChange, ...originalProps });
+    return jsx(CoordinatesInput, { defaultValue: defaultValue, error: meta.error, onChange: handleChange, ...originalProps });
 }
 
 const UntypedDatePicker = DatePicker;
 function FormikDatePicker({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(UntypedDatePicker, { defaultValue: field.value, error: error, onChange: handleChange, ...originalProps });
+    return jsx(UntypedDatePicker, { defaultValue: field.value, error: meta.error, onChange: handleChange, ...originalProps });
 }
 
 const UntypedDateRangePicker = DateRangePicker;
 function FormikDateRangePicker({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(UntypedDateRangePicker, { defaultValue: field.value, error: error, onChange: handleChange, ...originalProps });
+    return (jsx(UntypedDateRangePicker, { defaultValue: field.value, error: meta.error, onChange: handleChange, ...originalProps }));
 }
 
 function FormikEffect({ onChange }) {
@@ -35273,93 +35258,79 @@ function FormikEffect({ onChange }) {
 
 function FormikMultiCheckbox({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(MultiCheckbox, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(MultiCheckbox, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikMultiSelect({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(MultiSelect, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(MultiSelect, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikMultiRadio({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(MultiRadio, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(MultiRadio, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikNumberInput({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(NumberInput, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(NumberInput, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikSelect({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(Select, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(Select, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikTextarea({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(Textarea, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(Textarea, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikTextInput({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(TextInput, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(TextInput, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function useFieldControl(value, onChange, defaultValueWhenUndefined) {