Singleton now works when Tippys are added (#295)

* Singleton now works when Tippys are added

* Don’t setInstances if singleton is destroyed

Co-authored-by: Karl O’Keeffe <karl.okeeffe@coremont.com>

Author: karl

src/useSingleton.js

@@ -109,12 +109,24 @@ export default function useSingletonGenerator(createSingleton) {
             )
           ) {
             mutableBox.children.push(data);
+
+            if (mutableBox.instance && !mutableBox.instance.state.isDestroyed) {
+              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.state.isDestroyed) {
+            mutableBox.instance.setInstances(
+              mutableBox.children.map(child => child.instance),
+            );
+          }
         },
       };
 

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();