@antscorp/antsomi-ui 1.3.5-beta.785 → 1.3.5-beta.786

package/es/components/molecules/TagifyInput/TagifyInput.js

@@ -7,7 +7,6 @@ import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks/useDeepCompare
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
 import { useUpdateEffect } from '@antscorp/antsomi-ui/es/hooks/useUpdateEffect';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks/useDeepCompareEffect';
-import { useSettingsTagify } from './hooks';
 // Components
 import Tagify from '@yaireo/tagify';
 // Css
@@ -208,12 +207,30 @@ const TagifyInput = forwardRef((props, ref) => {
         };
     }, [initializeTagify]);
     // Settings some tagify attributes
-    useSettingsTagify(tagifyRef.current, {
-        disabled,
-        readonly,
-        maxPersonalizeTags,
-        placeholder,
-    });
+    useLayoutEffect(() => {
+        console.log('ref', tagifyRef);
+        if (tagifyRef.current && typeof readonly !== 'undefined') {
+            tagifyRef.current.setReadonly(!!readonly);
+        }
+    }, [readonly]);
+    // Set disabled
+    useLayoutEffect(() => {
+        if (tagifyRef.current && typeof disabled !== 'undefined') {
+            tagifyRef.current.setDisabled(!!disabled);
+        }
+    }, [disabled]);
+    // Set placeholder
+    useLayoutEffect(() => {
+        if (tagifyRef.current && typeof placeholder !== 'undefined') {
+            tagifyRef.current.setPlaceholder(placeholder);
+        }
+    }, [placeholder]);
+    // Set max personalize tags
+    useLayoutEffect(() => {
+        if (tagifyRef.current && typeof maxPersonalizeTags !== 'undefined') {
+            tagifyRef.current.settings.maxTags = maxPersonalizeTags;
+        }
+    }, [maxPersonalizeTags]);
     /*
      * Need to sync label of the tags if any map attribute is changed to make correct label
      * */