Microsoft-ui-xaml: Reveal Effect Hover Light Does Not Follow Pointer

[duke7553]

Describe the bug

Many areas of the shell appear to implement a XAML-based ContextFlyout. In my testing, the Reveal Highlight "hover light" of ContextFlyout items does not follow the pointer correctly and remains stationary, positioned towards the left side of the control. The border appears to follow the cursor, while the hover light does not.

Diagram Below Indicates Problematic Area (hover light)

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Open Start Menu or Action Center
2. Right Click on any supported UI element
3. Move the pointer over one of the displayed MenuFlyout items
4. Observe the problematic behavior when looking closely

Expected behavior

The hover light should properly follow the pointer within MenuFlyout items

Screenshots

The hover light doesn't follow the pointer when the border does.

Bug is even more pronounced when user interacts with a menu item. When holding down on one of them, the click effect starts from the far-left rather than where the pointer is. (In this case, the pointer is visualized as the yellow circle)

Version Info

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (18917) | Yes |
| May 2019 Update (18362) | Yes |
| October 2018 Update (17763) | No |
| April 2018 Update (17134) | |
| Fall Creators Update (16299) | |
| Creators Update (15063) | |

| Device form factor | Saw the problem? |
| :-------------------- | :------------------- |
| Desktop | Yes |
| Mobile | |
| Xbox | |
| Surface Hub | |
| IoT | |

[Poopooracoocoo]

Hehehe 😄😊

https://github.com/microsoft/microsoft-ui-xaml/issues/838#issuecomment-505816739

[Felix-Dev]

@duke7553 Eagle-eyed user spotted! I am playing with these Windows Shell Flyouts daily but had yet to notice this behavior.

[YuliKl]

Is this issue essentially a duplicate of #817?

[jevansaks]

No, I think this may be a bug with the reveal light positioning in windowed flyouts. @codendone @DmitriyKomin can you take a look?

[duke7553]

@YuliKl Not to my knowledge. The base layer appears to be present in this instance, but the hover light that constitutes it doesn’t follow the cursor.

[duke7553]

@jevansaks This also raises the question of why these shell flyouts still have reveal highlight when the guidelines now state "Don't use Reveal on popups, flyouts or dropdowns."

[jevansaks]

@chigy opened issue #1126 in which we hope to revisit the visuals and possibly the guidance as well. I agree the guidance is vague and inconsistently applied for reveal.

[chigy]

I feel this conversation is mixing multiple issues in one. Let me try to untangle one by one:

• Shell MenuFlyout doesn't support reveal - I think this is a bug that we don't see reveal on menus lately... I don't know if we have an issue for this. @DmitriyKomin ?
• Should MenuFlyout be using reveal? - I believe so, I do not recall that part of the rule being changed, but will take a look with @kikisaints along with next item.
• Documentation is confusing about where to use reveal - Agreed.

[kikisaints]

@jevansaks This also raises the question of why these shell flyouts still have reveal highlight when the guidelines now state "Don't use Reveal on popups, flyouts or dropdowns."

I think this is an oversight - we had a small window of time where it wasn't on popups and flyouts before we introduced it. Think this statement was overlooked when the docs were updated.

Thanks for pointing it out! It most certainly does belong on flyouts, popups and dropdowns! 😅

[duke7553]

@chigy Thanks for the response. The shell MenuFlyouts actually does display the reveal highlight effect, but it's displayed incorrectly. For instance, the border will correctly follow the pointer, but the "hover light" won't. (Described in detail above)

I do, however, notice reveal effect is not displayed properly on the MenuFlyout's within my app. Not sure if it's because I set the CornerRadius or not.

[chigy]

@chigy Thanks for the response. The shell MenuFlyouts actually does display the reveal highlight effect, but it's displayed incorrectly. For instance, the border will correctly follow the pointer, but the "hover light" won't. (Described in detail above)

I do, however, notice reveal effect is not displayed properly on the MenuFlyout's within my app. Not sure if it's because I set the CornerRadius or not.

@kikisaints , do you know what's going on here?

[duke7553]

Hey @kikisaints . Any news on this?

[duke7553]

I've updated this bug's title to reflect the fact that I now notice this in many other surfaces with reveal including ComboBox and ListView. (tested in build 19002)

[Poopooracoocoo]

@ItzLevvie holy cow that took forever. More than a year and it's something so prominent.

[YuliKl]

@Poopooracoocoo unfortunately making changes to to operating system components just isn't a quick process. There's inherent complexity to an OS that Store-updatable apps aren't burdened with.

Sounds like this is resolved so closing the issue.

[duke7553]

Just installed today. Happy to see this fixed @YuliKl

[CrazyBatkin]

Was just wondering when this fix would be applied to non-insider users ? I've just installed 20H1 and the bug still appears in all context menus on the start menu

[Felix-Dev]

@CrazyBatkin While I don't have any knowledge about the Windows team's plans, I think the fix will be shipped to regular Windows users with 20H2 later this year. If I recall correctly, this bug has been fixed in an Insider release released earlier this year which will likely be included in 20H2.

[Poopooracoocoo]

only took a year rofl