fix(react): PostHogFeature should render fallback when flag doesn't exist (#3146)

Author: gustavohstrassburger

.changeset/small-areas-melt.md

@@ -0,0 +1,5 @@
+---
+'@posthog/react': patch
+---
+
+Fix PostHogFeature component to properly handle undefined flags and false values

packages/react/src/components/PostHogFeature.tsx

@@ -31,21 +31,23 @@ export function PostHogFeature({
     const shouldTrackInteraction = trackInteraction ?? true
     const shouldTrackView = trackView ?? true
 
-    if (isUndefined(match) || variant === match) {
-        const childNode: React.ReactNode = isFunction(children) ? children(payload) : children
-        return (
-            <VisibilityAndClickTrackers
-                flag={flag}
-                options={visibilityObserverOptions}
-                trackInteraction={shouldTrackInteraction}
-                trackView={shouldTrackView}
-                onInteract={() => captureFeatureInteraction({ flag, posthog, flagVariant: variant })}
-                onView={() => captureFeatureView({ flag, posthog, flagVariant: variant })}
-                {...props}
-            >
-                {childNode}
-            </VisibilityAndClickTrackers>
-        )
+    if (!isUndefined(variant)) {
+        if (isUndefined(match) || variant === match) {
+            const childNode: React.ReactNode = isFunction(children) ? children(payload) : children
+            return (
+                <VisibilityAndClickTrackers
+                    flag={flag}
+                    options={visibilityObserverOptions}
+                    trackInteraction={shouldTrackInteraction}
+                    trackView={shouldTrackView}
+                    onInteract={() => captureFeatureInteraction({ flag, posthog, flagVariant: variant })}
+                    onView={() => captureFeatureView({ flag, posthog, flagVariant: variant })}
+                    {...props}
+                >
+                    {childNode}
+                </VisibilityAndClickTrackers>
+            )
+        }
     }
     return <>{fallback}</>
 }

packages/react/src/components/__tests__/PostHogFeature.test.tsx

@@ -249,4 +249,43 @@ describe('PostHogFeature component', () => {
         fireEvent.click(screen.getByTestId('hi_example_feature_1_payload'))
         expect(posthog.capture).toHaveBeenCalledTimes(1)
     })
+
+    it('should not render when flag does not exist and no match is specified', () => {
+        render(
+            <PostHogProvider client={posthog}>
+                <PostHogFeature flag={'nonexistent_flag'}>
+                    <div data-testid="helloDiv">Hello</div>
+                </PostHogFeature>
+            </PostHogProvider>
+        )
+
+        expect(screen.queryByTestId('helloDiv')).not.toBeInTheDocument()
+        expect(posthog.capture).not.toHaveBeenCalled()
+    })
+
+    it('should render fallback when flag does not exist (like new-cta example)', () => {
+        render(
+            <PostHogProvider client={posthog}>
+                <PostHogFeature flag={'new-cta'} fallback={<div data-testid="oldButton">Old Button</div>}>
+                    <div data-testid="newButton">New Button</div>
+                </PostHogFeature>
+            </PostHogProvider>
+        )
+
+        expect(screen.queryByTestId('newButton')).not.toBeInTheDocument()
+        expect(screen.queryByTestId('oldButton')).toBeInTheDocument()
+        expect(posthog.capture).not.toHaveBeenCalled()
+    })
+
+    it('should render content when match=false and flag variant is false', () => {
+        render(
+            <PostHogProvider client={posthog}>
+                <PostHogFeature flag={'test_false'} match={false}>
+                    <div data-testid="disabledUI">Show when disabled</div>
+                </PostHogFeature>
+            </PostHogProvider>
+        )
+
+        expect(screen.queryByTestId('disabledUI')).toBeInTheDocument()
+    })
 })