@rolster/react-components 18.13.4 → 18.13.5

package/dist/es/index.js

@@ -1369,41 +1369,63 @@ const MAX_ELEMENTS = 6;
 function useAutocompleteField({ disabled, formControl, onSelect, onValue, suggestions }) {
     const [pattern, setPattern] = useState('');
     const [coincidences, setCoincidences] = useState([]);
-    const [store, setStore] = useState({
+    const currentStore = useRef({
         pattern: '',
         coincidences: [],
         previous: null
     });
     const listControl = useListControl({ suggestions, formControl });
     const { collection, inputRef, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
+    const initializedState = useRef(false);
+    const initializedCollection = useRef(false);
     const changeInternal = useRef(false);
-    useEffect(() => filterSuggestions(pattern, true), [suggestions]);
-    useEffect(() => filterSuggestions(pattern), [pattern]);
     useEffect(() => {
+        refreshCoincidences(pattern, true);
+    }, [suggestions]);
+    useEffect(() => {
+        refreshCoincidences(pattern);
+    }, [pattern]);
+    useEffect(() => {
+        if (!initializedState.current || !initializedCollection.current) {
+            initializedState.current = true;
+            return;
+        }
         if (changeInternal.current) {
             changeInternal.current = false;
+            return;
         }
-        else {
-            resetState(formControl?.state);
-        }
+        refresh(collection, formControl?.state);
     }, [formControl?.state]);
-    useEffect(() => resetCollection(collection, formControl?.state), [collection]);
+    useEffect(() => {
+        if (!initializedCollection.current || !initializedState.current) {
+            initializedCollection.current = true;
+            return;
+        }
+        refresh(collection, formControl?.state);
+    }, [collection]);
+    function refresh(collection, state) {
+        if (!state) {
+            return setValue('');
+        }
+        const element = collection.find(state);
+        if (element) {
+            return setValue(element.description);
+        }
+        setValue('');
+        setFormState(undefined);
+    }
     function setFormState(value) {
         if (formControl) {
             changeInternal.current = true;
             formControl.setState(value);
         }
     }
-    function resetCollection(collection, state) {
-        setValue(state ? collection.find(state)?.description || '' : '');
-    }
-    function resetState(state) {
-        resetCollection(collection, state);
-    }
     function onClickControl() {
         if (!disabled) {
             setVisible(true);
-            setTimeout(() => inputRef?.current?.focus(), DURATION_ANIMATION$1);
+            setTimeout(() => {
+                inputRef?.current?.focus();
+            }, DURATION_ANIMATION$1);
         }
     }
     function onFocusInput() {
@@ -1457,15 +1479,15 @@ function useAutocompleteField({ disabled, formControl, onSelect, onValue, sugges
             onValue(value);
         }
     }
-    function filterSuggestions(pattern, reboot = false) {
-        const result = createStoreAutocomplete({
+    function refreshCoincidences(pattern, reboot = false) {
+        const { collection, store } = createStoreAutocomplete({
             pattern,
             suggestions,
             reboot,
-            store
+            store: currentStore.current
         });
-        setCoincidences(result.collection.slice(0, MAX_ELEMENTS));
-        setStore(result.store);
+        currentStore.current = store;
+        setCoincidences(collection.slice(0, MAX_ELEMENTS));
     }
     return {
         coincidences,
@@ -1906,28 +1928,44 @@ function RlsFormNavigation({ children, visible, rlsTheme }) {
 function useSelectField({ suggestions, formControl, onSelect, onValue }) {
     const listControl = useListControl({ suggestions, formControl });
     const { collection, inputRef, visible, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
+    const initializedState = useRef(false);
+    const initializedCollection = useRef(false);
     const changeInternal = useRef(false);
     useEffect(() => {
+        if (!initializedState.current || !initializedCollection.current) {
+            initializedState.current = true;
+            return;
+        }
         if (changeInternal.current) {
             changeInternal.current = false;
+            return;
         }
-        else {
-            resetState(formControl?.state);
-        }
+        refresh(collection, formControl?.state);
     }, [formControl?.state]);
-    useEffect(() => resetCollection(collection, formControl?.state), [collection]);
+    useEffect(() => {
+        if (!initializedCollection.current || !initializedState.current) {
+            initializedCollection.current = true;
+            return;
+        }
+        refresh(collection, formControl?.state);
+    }, [collection]);
+    function refresh(collection, state) {
+        if (!state) {
+            return setValue('');
+        }
+        const element = collection.find(state);
+        if (element) {
+            return setValue(element.description);
+        }
+        setValue('');
+        setFormState(undefined);
+    }
     function setFormState(value) {
         if (formControl) {
             changeInternal.current = true;
             formControl.setState(value);
         }
     }
-    function resetCollection(collection, state) {
-        setValue(state ? collection.find(state)?.description || '' : '');
-    }
-    function resetState(state) {
-        resetCollection(collection, state);
-    }
     function onFocusInput() {
         setFocused(true);
     }
@@ -1953,9 +1991,8 @@ function useSelectField({ suggestions, formControl, onSelect, onValue }) {
         }
     }
     function onClickAction() {
-        const newVisible = !visible;
-        setVisible(newVisible);
-        if (newVisible) {
+        setVisible(!visible);
+        if (!visible) {
             inputRef?.current?.focus();
         }
     }