[Bug]: Callout positioning incorrect when callout has pivot with pivot items having different height

ashray17aman commented 2 years ago

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 1.76 GB / 15.85 GB
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.33)
    Internet Explorer: 11.0.22000.120

Are you reporting Accessibility issue?

no

Reproduction

https://codepen.io/ashrayaman/pen/XWqjEZp

Bug Description

Added a callout on a button. Added pivot with 2 or 3 pivot items inside the callout. Set the directionalHint to rightTopEdge (11) The first pivot item had a long list but the second pivot item had short text.

Actual Behavior

The first pivot item appeared fine whereas the second one's preview was broken. callout beak was appearing beside the button but the callout content was not aligned properly. Was at bottom of the page. Preview for first (long) pivot item: Notice the beak and callout are together.

Preview for the second (short) pivot item: Notice the beak is near the button but the actual content is at the bottom of the page

Only the first item in pivot is aligned properly. Rest of the items are bottom aligned with the first item.

Expected Behavior

All the pivot item's callout should be aligned with the button and the beak.

Logs

No response

Requested priority

High

Products/sites affected

PowerPages - https://make.powerpages.microsoft.com/

Are you willing to submit a PR to fix?

yes

Validations

[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

gouttierre commented 2 years ago

This issue has been queued for upcoming investigations. To set expectations the developers will review this issue once capacity allows and all updates will be posted on the issue accordingly. Great to see that you are willing to contribute to this issue, as soon as engineering has determined the validity of the case, they will work with you in implementing a fix

Hotell commented 2 years ago

thanks for the issue description and repro.

I was looking at Callout docs and based on those one should use finalHeight prop if your callout contains dynamic content. But it turns out that doesn't work ( the prop doesn't do anything ).

I'm not sure though that Callout was intended to be used with dynamic content (like your use-case). There is no direct owner of Callout so I cant provide additional context (besides original author @dzearing). This should be ideally addressed by someone from cxe-red or cxe-coastal.

One possible workaround I could come with:

use calloutMaxHeight={'100px'} to limit the container height. Although I have to admit that provides subpar DX.

@ashray17aman if you have a workable solution in mind for this, please don't hesitate to send PR. Last but not least it might be good idea to actually use more appropriate for such an interaction that can accommodate dynamic content like Modal/Dialog) ty!

@gouttierre we need to find owner for Callout for future reference.

gouttierre commented 2 years ago

@JustSlone / @jurokapsiar - do we have a code owner for Callout?

JustSlone commented 2 years ago

@JustSlone / @jurokapsiar - do we have a code owner for Callout?

Routing this one to cxe-coastal (CC @micahgodbolt)

msft-fluent-ui-bot commented 1 year ago

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

microsoft / fluentui