From e68440d06eb346deb167cc76735401a0c3f9edae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karl=20O=E2=80=99Keeffe?= <karl.okeeffe@coremont.com>
Date: Mon, 22 Mar 2021 13:45:36 +0000
Subject: [PATCH 1/2] Singleton now works when Tippys are added

---
 src/useSingleton.js       | 12 ++++++++++
 test/useSingleton.test.js | 48 ++++++++++++++++++++++++++++++++++++++-
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/src/useSingleton.js b/src/useSingleton.js
index 95fd457..3f2c7a1 100644
--- a/src/useSingleton.js
+++ b/src/useSingleton.js
@@ -109,12 +109,24 @@ export default function useSingletonGenerator(createSingleton) {
             )
           ) {
             mutableBox.children.push(data);
+
+            if (mutableBox.instance) {
+              mutableBox.instance.setInstances(
+                mutableBox.children.map(child => child.instance),
+              );
+            }
           }
         },
         cleanup(instance) {
           mutableBox.children = mutableBox.children.filter(
             data => data.instance !== instance,
           );
+
+          if (mutableBox.instance) {
+            mutableBox.instance.setInstances(
+              mutableBox.children.map(child => child.instance),
+            );
+          }
         },
       };
 
diff --git a/test/useSingleton.test.js b/test/useSingleton.test.js
index 094ce51..c39f634 100644
--- a/test/useSingleton.test.js
+++ b/test/useSingleton.test.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import Tippy, {useSingleton} from '../src';
 import TippyHeadless, {
   useSingleton as useSingletonHeadless,
@@ -169,6 +169,52 @@ describe('disabled prop', () => {
   });
 });
 
+it('when new Tippys are added to DOM, they are registered with singleton', () => {
+  const TippyCreator = ({target}) => {
+    const [isTippyAdded, setIsTippyAdded] = useState(false);
+
+    return (
+      <div>
+        <button onClick={() => setIsTippyAdded(true)} data-testid="add-tippy" />
+        {isTippyAdded && (
+          <Tippy content="a" singleton={target}>
+            <button data-testid="a" />
+          </Tippy>
+        )}
+      </div>
+    );
+  };
+
+  function App() {
+    const [source, target] = useSingleton();
+
+    return (
+      <>
+        <Tippy
+          onCreate={onCreate}
+          singleton={source}
+          trigger="click"
+          hideOnClick={false}
+        />
+        <TippyCreator target={target} />
+      </>
+    );
+  }
+
+  const {getByTestId} = render(<App />);
+
+  const addTippyButton = getByTestId('add-tippy');
+
+  fireEvent.click(addTippyButton);
+
+  const buttonA = getByTestId('a');
+
+  fireEvent.click(buttonA);
+
+  expect(instance.state.isVisible).toBe(true);
+  expect(instance.props.content.textContent).toBe('a');
+});
+
 describe('useSingleton headless mode', () => {
   function App() {
     const [source, target] = useSingletonHeadless();

From 82ba0c570eb5e438ddf3add866b7a7a90cdf1f2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Karl=20O=E2=80=99Keeffe?= <karl.okeeffe@coremont.com>
Date: Mon, 22 Mar 2021 14:38:34 +0000
Subject: [PATCH 2/2] =?UTF-8?q?Don=E2=80=99t=20setInstances=20if=20singlet?=
 =?UTF-8?q?on=20is=20destroyed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/useSingleton.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/useSingleton.js b/src/useSingleton.js
index 3f2c7a1..faf7921 100644
--- a/src/useSingleton.js
+++ b/src/useSingleton.js
@@ -110,7 +110,7 @@ export default function useSingletonGenerator(createSingleton) {
           ) {
             mutableBox.children.push(data);
 
-            if (mutableBox.instance) {
+            if (mutableBox.instance && !mutableBox.instance.state.isDestroyed) {
               mutableBox.instance.setInstances(
                 mutableBox.children.map(child => child.instance),
               );
@@ -122,7 +122,7 @@ export default function useSingletonGenerator(createSingleton) {
             data => data.instance !== instance,
           );
 
-          if (mutableBox.instance) {
+          if (mutableBox.instance && !mutableBox.instance.state.isDestroyed) {
             mutableBox.instance.setInstances(
               mutableBox.children.map(child => child.instance),
             );