fix: dynamic singleton headless content (#334)

Author: atomiks

demo/index.js

@@ -168,6 +168,34 @@ function Singleton() {
   );
 }
 
+function SingletonHeadlessDynamicContent() {
+  const [source, target] = useSingletonHeadless();
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    setInterval(() => {
+      setCount(c => c + 1);
+    }, 1000);
+  }, []);
+
+  return (
+    <>
+      <TippyHeadless
+        render={(attrs, content) => (
+          <ReactSpringBox {...attrs}>{content}</ReactSpringBox>
+        )}
+        singleton={source}
+      />
+      <TippyHeadless content={count} singleton={target}>
+        <button>Reference</button>
+      </TippyHeadless>
+      <TippyHeadless content={count + 1} singleton={target}>
+        <button>Reference</button>
+      </TippyHeadless>
+    </>
+  );
+}
+
 function SingletonHeadless() {
   const [source, target] = useSingletonHeadless({overrides: ['placement']});
   const [enabled, setEnabled] = useState(false);
@@ -365,6 +393,8 @@ function App() {
       <Singleton />
       <h2>Singleton Headless</h2>
       <SingletonHeadless />
+      <h2>Singleton Headless Dynamic Content</h2>
+      <SingletonHeadlessDynamicContent />
       <h2>Nested Singleton</h2>
       <NestedSingleton />
       <h2>Plugins</h2>

src/Tippy.js

@@ -71,22 +71,27 @@ export default function TippyGenerator(tippy) {
     if (render) {
       computedProps = {
         ...props,
-        plugins: isSingletonMode
-          ? [
-              ...plugins,
-              {
-                fn: () => ({
-                  onTrigger(_, event) {
-                    const {content} = singleton.data.children.find(
-                      ({instance}) =>
-                        instance.reference === event.currentTarget,
-                    );
-                    setSingletonContent(content);
+        plugins:
+          isSingletonMode && singleton.data != null
+            ? [
+                ...plugins,
+                {
+                  fn() {
+                    return {
+                      onTrigger(instance, event) {
+                        const node = singleton.data.children.find(
+                          ({instance}) =>
+                            instance.reference === event.currentTarget,
+                        );
+                        instance.state.$$activeSingletonInstance =
+                          node.instance;
+                        setSingletonContent(node.content);
+                      },
+                    };
                   },
-                }),
-              },
-            ]
-          : plugins,
+                },
+              ]
+            : plugins,
         render: () => ({popper: mutableBox.container}),
       };
     }
@@ -120,6 +125,7 @@ export default function TippyGenerator(tippy) {
           instance,
           content,
           props: computedProps,
+          setSingletonContent,
         });
       }
 
@@ -165,6 +171,7 @@ export default function TippyGenerator(tippy) {
           instance,
           content,
           props: computedProps,
+          setSingletonContent,
         });
       }
     });

src/useSingleton.js

@@ -95,6 +95,7 @@ export default function useSingletonGenerator(createSingleton) {
         data: mutableBox,
         hook(data) {
           mutableBox.sourceData = data;
+          mutableBox.setSingletonContent = data.setSingletonContent;
         },
         cleanup() {
           mutableBox.sourceData = null;
@@ -103,18 +104,23 @@ export default function useSingletonGenerator(createSingleton) {
 
       const target = {
         hook(data) {
+          mutableBox.children = mutableBox.children.filter(
+            ({instance}) => data.instance !== instance,
+          );
+          mutableBox.children.push(data);
+
           if (
-            !mutableBox.children.find(
-              ({instance}) => data.instance === instance,
-            )
+            mutableBox.instance?.state.isMounted &&
+            mutableBox.instance?.state.$$activeSingletonInstance ===
+              data.instance
           ) {
-            mutableBox.children.push(data);
+            mutableBox.setSingletonContent?.(data.content);
+          }
 
-            if (mutableBox.instance && !mutableBox.instance.state.isDestroyed) {
-              mutableBox.instance.setInstances(
-                mutableBox.children.map(child => child.instance),
-              );
-            }
+          if (mutableBox.instance && !mutableBox.instance.state.isDestroyed) {
+            mutableBox.instance.setInstances(
+              mutableBox.children.map(child => child.instance),
+            );
           }
         },
         cleanup(instance) {