fix(popover-headless): set popover="auto" as a default (#36090)

Co-authored-by: Dmytro Kirpa <dmytrokirpa@microsoft.com>

Author: mainframev

change/@fluentui-react-headless-components-preview-6e87151c-2e77-4dd7-8c18-4b4e44cb29b0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: set popover=auto on surface via jsx defaults",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-headless-components-preview/library/src/components/Popover/PopoverSurface/usePopoverSurface.ts

@@ -34,6 +34,7 @@ export const usePopoverSurface = (props: PopoverSurfaceProps, ref: React.Ref<HTM
         role: 'group',
         ...props,
         id: surfaceId,
+        popover: 'auto',
         'data-popover-surface': '',
         'data-open': stringifyDataAttribute(open),
       },

packages/react-components/react-headless-components-preview/library/src/components/Popover/usePopover.ts

@@ -98,10 +98,6 @@ export const usePopover = (props: PopoverProps): PopoverState => {
       return;
     }
 
-    if (!surface.hasAttribute('popover') || surface.getAttribute('popover') !== 'auto') {
-      surface.setAttribute('popover', 'auto');
-    }
-
     if (!(SUPPORTS_POPOVER_OPEN_SELECTOR && surface.matches(':popover-open'))) {
       surface.showPopover();
     }

packages/react-components/react-headless-components-preview/library/src/hooks/usePositioning/usePositioning.test.tsx

@@ -38,7 +38,10 @@ describe('usePositioning', () => {
   it('containerRef writes position-anchor and position-area matching the props', () => {
     const result = mountHook({ position: 'below', align: 'start' });
     const node = document.createElement('div');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node.style.getPropertyValue('position-anchor')).toMatch(/^--popover-anchor-/);
     expect(node).toHaveStyle({ positionArea: 'block-end span-inline-end' });
@@ -47,39 +50,54 @@ describe('usePositioning', () => {
   it('containerRef writes position: absolute by default and clears the UA inset/margin defaults', () => {
     const result = mountHook();
     const node = document.createElement('div');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node).toHaveStyle({ position: 'absolute', inset: 'auto', margin: '0px' });
   });
 
   it('containerRef honors strategy: "fixed"', () => {
     const result = mountHook({ strategy: 'fixed' });
     const node = document.createElement('div');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node).toHaveStyle({ position: 'fixed' });
   });
 
   it('containerRef writes data-placement matching (position, align)', () => {
     const result = mountHook({ position: 'below', align: 'start' });
     const node = document.createElement('div');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node).toHaveAttribute('data-placement', 'below-start');
   });
 
   it('containerRef sets position-try-fallbacks to the three-try flip chain by default', () => {
     const result = mountHook();
     const node = document.createElement('div');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node).toHaveStyle({ positionTryFallbacks: 'flip-block, flip-inline, flip-block flip-inline' });
   });
 
   it('containerRef uses custom fallbackPositions verbatim when provided', () => {
     const result = mountHook({ fallbackPositions: ['below-start', 'after'] });
     const node = document.createElement('div');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node).toHaveStyle({ positionTryFallbacks: 'block-end span-inline-end, inline-end' });
   });
@@ -88,31 +106,43 @@ describe('usePositioning', () => {
     const result = mountHook({ pinned: true });
     const node = document.createElement('div');
     node.style.setProperty('position-try-fallbacks', 'flip-block');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node.style.getPropertyValue('position-try-fallbacks')).toBe('');
   });
 
   it('containerRef writes cover self-alignment when coverTarget is true', () => {
     const result = mountHook({ coverTarget: true, position: 'above', align: 'start' });
     const node = document.createElement('div');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node).toHaveStyle({ positionArea: 'center', alignSelf: 'end', justifySelf: 'start' });
   });
 
   it('containerRef writes place-self: anchor-center for center alignment (crbug 438334710 workaround)', () => {
     const result = mountHook({ position: 'above', align: 'center' });
     const node = document.createElement('div');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node).toHaveStyle({ placeSelf: 'anchor-center' });
   });
 
   it('containerRef does not write place-self for non-center alignments', () => {
     const result = mountHook({ position: 'above', align: 'start' });
     const node = document.createElement('div');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node.style.getPropertyValue('place-self')).toBe('');
     expect(node.style.getPropertyValue('justify-self')).toBe('');
@@ -122,15 +152,21 @@ describe('usePositioning', () => {
   it('containerRef writes matchTargetSize width via anchor-size()', () => {
     const result = mountHook({ matchTargetSize: 'width' });
     const node = document.createElement('div');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node).toHaveStyle({ width: 'anchor-size(width)' });
   });
 
   it('containerRef applies offset as logical margins', () => {
     const result = mountHook({ position: 'below', offset: { mainAxis: 8, crossAxis: 4 } });
     const node = document.createElement('div');
-    result.current.containerRef(node);
+
+    act(() => {
+      result.current.containerRef(node);
+    });
 
     expect(node).toHaveStyle({ marginBlockStart: '8px', marginInlineStart: '4px' });
   });