fix(react-popover): Add zIndex=1 to PopoverSurface when rendering inl…

…ine to avoid elements positioned relative to render on top of it (microsoft#29425)

* fix: Add zIndex=1 to PopoverSurface when rendering inline to avoid elements positioned relative to render on top of it.

* change file

* add vr-test

* fix test wrapper

apps/vr-tests-react-components/src/stories/Popover.stories.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
 import { Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-popover';
 import { tokens } from '@fluentui/react-theme';
-import { TestWrapperDecorator } from '../utilities/index';
+import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utilities/index';
 
 const PopoverPositioning: React.FC = () => {
   const positions = [
@@ -59,7 +59,7 @@ storiesOf('Popover Converged', module)
   .addStory('positioning', () => <PopoverPositioning />, { includeRtl: true, includeHighContrast: true });
 
 storiesOf('Popover Converged', module)
-  .addDecorator(TestWrapperDecorator)
+  .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story => (
     <StoryWright steps={new Steps().click('#show-popover').snapshot('PopoverSurface focused').end()}>
       {story()}
@@ -89,7 +89,25 @@ storiesOf('Popover Converged', module)
         </PopoverSurface>
       </Popover>
     );
-  });
+  })
+  .addStory('when rendering inline, it should not render behind relatively positioned elements', () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <Popover inline>
+        <PopoverTrigger>
+          <button id="show-popover">Show Popover</button>
+        </PopoverTrigger>
+        <PopoverSurface>
+          <span>Sample PopoverSurface text</span>
+        </PopoverSurface>
+      </Popover>
+      <input style={{ position: 'relative' }} />
+    </div>
+  ));
 
 const sampleText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
  et dolore magna aliqua. Felis donec et odio pellentesque diam volutpat commodo sed. In pellentesque massa placerat duis

change/@fluentui-react-popover-20abdae3-515d-4171-abe6-f97d494853bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Add zIndex=1 to PopoverSurface when rendering inline to avoid elements positioned relative to render on top of it.",
+  "packageName": "@fluentui/react-popover",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.styles.ts

@@ -29,6 +29,12 @@ const useStyles = makeStyles({
     ...createSlideStyles(10),
   },
 
+  inline: {
+    // When rendering inline, the PopoverSurface will be rendered under relatively positioned elements such as Input.
+    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
+    zIndex: 1,
+  },
+
   inverted: {
     backgroundColor: tokens.colorNeutralBackgroundStatic,
     color: tokens.colorNeutralForegroundStaticInverted,
@@ -64,6 +70,7 @@ export const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): Po
   state.root.className = mergeClasses(
     popoverSurfaceClassNames.root,
     styles.root,
+    state.inline && styles.inline,
     state.size === 'small' && styles.smallPadding,
     state.size === 'medium' && styles.mediumPadding,
     state.size === 'large' && styles.largePadding,