#489 - improved controlled-component ability by better comparing betw…

…een current value and new value

README.md

@@ -380,6 +380,11 @@ See [**live demo**](https://codesandbox.io/s/tagify-react-wrapper-oempc) for Rea
 
 A Tagify React component is exported from [`react.tagify.js`](https://github.com/yairEO/tagify/blob/master/dist/react.tagify.js):
 
+### Update regarding `onChange` prop:
+I have changed how the `onChange` works internally within the Wrapper of Tagify
+so as of *March 30, 2021* the `e` argument will include a `detail` parameter with the value as string.
+There is no more `e.target`, and to access the original DOM input element, do this: `e.detail.tagify.DOM.originalInput`.
+
 > Note: You will need to inport Tagify's CSS also, either by javasceript or by SCSS `@import` (which is preferable)
 ```javascript
 import Tags from "@yaireo/tagify/dist/react.tagify" // React-wrapper file
@@ -392,7 +397,7 @@ const App = () => {
       settings={settings}  // tagify settings object
       value="a,b,c"
       {...tagifyProps}   // dynamic props such as "loading", "showDropdown:'abc'", "value"
-      onChange={e => (e.persist(), console.log("CHANGED:", e.target.value))}
+      onChange={ e => console.log("CHANGED:", JSON.parse(e.detail.value)) }
     />
   )
 })
@@ -401,6 +406,9 @@ const App = () => {
 To gain full access to Tagify's (instance) inner methods, A custom `ref` can be used:
 
 ```jsx
+...
+const tagifyRef = useRef()
+...
 <Tags tagifyRef={tagifyRef} ... />
 
 // or mix-mode

src/react.tagify.js

@@ -65,7 +65,6 @@ const TagifyWrapper = ({
                 : JSON.stringify(value),
         className,
         readOnly,
-        onChange,
         autoFocus,
         placeholder,
         defaultValue
@@ -96,6 +95,7 @@ const TagifyWrapper = ({
         onFocus   && t.on("focus"  , onFocus)
         onBlur    && t.on("blur"   , onBlur)
         onClick   && t.on("click"  , onClick)
+        onChange  && t.on("change" , onChange)
 
         // Bridge Tagify instance with parent component
         if (tagifyRef) {
@@ -126,7 +126,9 @@ const TagifyWrapper = ({
     }, [whitelist])
 
     useEffect(() => {
-        if (mountedRef.current && !isSameDeep(value, tagify.current.value) ) {
+        const currentValue = tagify.current.getCleanValue()
+
+        if (mountedRef.current && !isSameDeep(value, currentValue)) {
             tagify.current.loadOriginalValues(value)
         }
     }, [value])

src/tagify.js

@@ -1479,14 +1479,21 @@ Tagify.prototype = {
         this.toggleClass(classNames.empty, !hasValue)
     },
 
+    /**
+     * removes properties from `this.value` which are only used internally
+     */
+    getCleanValue(){
+        return removeCollectionProp(this.value, ['__isValid', '__removed', '__originalData', '__originalHTML']);
+    },
+
     /**
      * update the origianl (hidden) input field's value
      * see - https://stackoverflow.com/q/50957841/104380
      */
     update( args ){
         var inputElm = this.DOM.originalInput,
             { withoutChangeEvent } = args || {},
-            value = removeCollectionProp(this.value, ['__isValid', '__removed']);
+            value = this.getCleanValue();
 
         if( !this.settings.mixMode.integrated ){
             inputElm.value = this.settings.mode == 'mix'