[Bug]: Coachmark doesn't render teaching bubble in the correct place when not in the right

[PatoBeltran]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 5.93 GB / 15.92 GB
  Browsers:
    Edge: Spartan (44.22621.160.0), Chromium (102.0.1245.41)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

Repro in docs https://developer.microsoft.com/en-us/fluentui#/controls/web/coachmark#ICoachmark

Bug Description

Actual Behavior

When rendering the coachmark in the center of the target, once it is open to a teaching bubble, it renders all to the right (instead of centering with the target), once you click outside of it, it jumps to the center position.

coachmark.mp4

This video was recorded from your docs site.

Expected Behavior

The teaching bubble should be rendered at the center and if you click outside of it it shouldn't jump to a different place.

Logs

No response

Requested priority

Normal

Products/sites affected

IoT Central

Are you willing to submit a PR to fix?

no

Validations

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

[malladi-s]

With persistentBeak option turned on, this looks especially bad - https://codepen.io/malladi-s/pen/rNJEdQa

[gouttierre]

@PatoBeltran - Thanks for filing this issue with us. To set expectations the developers will review this issue once capacity allows.

@spmonahan - Would you be able to confirm if this is a regression, or if this behavior is an issue? Thanks

[spmonahan]

This looks like an issue to me. It affects all of the "center" options -- top center, right center, bottom center and left center.

I think there are two parts to this issue:

1. Coachmark is not correctly aligned on the horizontal axis initially. As noted in the issue, it ultimately is aligned correctly when it jumps.
2. All of the Coachmark animations slide out to in the up, right, dow and left directions. For a centered Coachmark I'd expect it to expand outward so the mark is always centered.