From a1e4ff3679350a993a1821175ae0a970c7a4dd14 Mon Sep 17 00:00:00 2001
From: Harsh Zalavadiya <harshzalavadiya@users.noreply.github.com>
Date: Sat, 1 Oct 2022 13:56:14 +0530
Subject: [PATCH] refactor: :recycle: detact outside value changes (#27)

---
 package.json                   | 2 +-
 src/index.tsx                  | 6 ++++++
 stories/tags-input.stories.tsx | 9 +++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 3fa3040..ae6de07 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-tag-input-component",
   "description": "lightweight component for tag(s) input",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "license": "MIT",
   "author": "Harsh Zalavadiya",
   "repository": "https://github.com/hc-oss/react-tag-input-component",
diff --git a/src/index.tsx b/src/index.tsx
index 90debad..53ef140 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -88,6 +88,12 @@ export const TagsInput = ({
     onChange && onChange(tags);
   }, [tags]);
 
+  useEffect(() => {
+    if (JSON.stringify(value) !== JSON.stringify(tags)) {
+      setTags(value)
+    }
+  }, [value])
+
   const handleOnKeyUp = e => {
     e.stopPropagation();
 
diff --git a/stories/tags-input.stories.tsx b/stories/tags-input.stories.tsx
index 7deeaa9..4a72a60 100644
--- a/stories/tags-input.stories.tsx
+++ b/stories/tags-input.stories.tsx
@@ -32,7 +32,7 @@ export const Page = () => {
         isEditOnRemove={isEditOnRemove}
         beforeAddValidate={beforeAddValidate}
       />
-      <div style={{ margin: "2rem 0", display: "flex", flexFlow: "row" }}>
+      <div style={{ marginTop: "2rem" }}>
         <button
           onClick={() => setDisabled(!disabled)}
           style={{ marginRight: "2rem" }}
@@ -41,7 +41,7 @@ export const Page = () => {
         </button>
         <pre>Disable: {JSON.stringify(disabled)}</pre>
       </div>
-      <div style={{ margin: "2rem 0", display: "flex", flexFlow: "row" }}>
+      <div>
         <button
           onClick={() => setisEditOnRemove(!isEditOnRemove)}
           style={{ marginRight: "2rem" }}
@@ -50,6 +50,11 @@ export const Page = () => {
         </button>
         <pre>Keep Words on Backspace: {JSON.stringify(isEditOnRemove)}</pre>
       </div>
+      <div>
+        <button onClick={() => setSelected(["tangerine"])}>
+          override value
+        </button>
+      </div>
     </div>
   );
 };