fix: popover focus management fix (#20276)

Co-authored-by: NikhilTomar-sev1 <NIKHIL.TOMAR@ibm.com>

Author: 2nikhiltom

packages/react/src/components/Popover/__tests__/Popover-test.js

@@ -10,6 +10,9 @@ import React from 'react';
 import { Popover, PopoverContent } from '../../Popover';
 import userEvent from '@testing-library/user-event';
 import { waitForPosition } from '../../ListBox/test-helpers';
+import RadioButton from '../../RadioButton';
+import RadioButtonGroup from '../../RadioButtonGroup';
+import { default as Checkbox } from '../../Checkbox';
 
 const prefix = 'cds';
 
@@ -313,4 +316,42 @@ describe('Popover', () => {
     await userEvent.click(screen.getByTestId('inside-input'));
     expect(onRequestClose).not.toHaveBeenCalled();
   });
+  it('should not close TabTip when interacting with form elements inside', async () => {
+    const onRequestClose = jest.fn();
+    render(
+      <Popover open isTabTip onRequestClose={onRequestClose}>
+        <button type="button">Settings</button>
+        <PopoverContent>
+          <RadioButtonGroup legendText="Test options">
+            <RadioButton
+              labelText="Option 1"
+              value="option1"
+              id="tabtip-radio-1"
+              data-testid="tabtip-radio-1"
+            />
+            <RadioButton
+              labelText="Option 2"
+              value="option2"
+              id="tabtip-radio-2"
+              data-testid="tabtip-radio-2"
+            />
+          </RadioButtonGroup>
+          <Checkbox
+            labelText="Test checkbox"
+            id="tabtip-checkbox"
+            data-testid="tabtip-checkbox"
+          />
+        </PopoverContent>
+      </Popover>
+    );
+
+    await userEvent.click(screen.getByTestId('tabtip-radio-1'));
+    expect(onRequestClose).not.toHaveBeenCalled();
+
+    await userEvent.click(screen.getByTestId('tabtip-radio-2'));
+    expect(onRequestClose).not.toHaveBeenCalled();
+
+    await userEvent.click(screen.getByTestId('tabtip-checkbox'));
+    expect(onRequestClose).not.toHaveBeenCalled();
+  });
 });

packages/react/src/components/Popover/index.tsx

@@ -186,8 +186,13 @@ export const Popover: PopoverComponent & {
   // The `Popover` should close whenever it and its children loses focus
   useEvent(popover, 'focusout', (event) => {
     const relatedTarget = (event as FocusEvent).relatedTarget as Node | null;
+    if (isTabTip) {
+      if (relatedTarget && !popover.current?.contains(relatedTarget)) {
+        onRequestClose?.();
+      }
+      return;
+    }
 
-    // No relatedTarget, focus moved to nowhere, so close the popover
     if (!relatedTarget) {
       onRequestClose?.();
       return;