Documentation: Code Examples in Control-Documentation no longer scrollable using mouse wheel in Firefox

[alex3683]

Environment Information

• Browser and OS versions: Firefox 69.0.3 (64-Bit) on Windows 10

Please provide a reproduction of the bug in a codepen:

• Open for example https://developer.microsoft.com/en-us/fabric#/controls/web/pickers in Firefox.
• Under "Usage" -> "Tag Picker" click on "Show Code"
• Try scrolling in the code div using the mouse wheel

Actual behavior:

The code does not scroll in Firefox. In Chrome for example, scrolling works.

Expected behavior:

The code is scrollable by mouse wheel in every major browser.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) No

Requested priority: (Blocking, High, Normal, Low) Normal

Products/sites affected: (if applicable) Every Code Example

[marygans]

Hi @alex3683 thank you for submitting this issue! I was also able to confirm this issue in Firefox.

It looks like this was an existing issue with the monaco editor as there was a recently closed issue here. We will need to bump our monaco version monaco-editor@0.17.1 to0.18.1to get the fix which seems to address the issue adequately for folks.

FYI @ecraig12345 and @kenotron

[ecraig12345]

At least last I looked at the latest monaco-editor version, bumping it introduced some other issue which would be impossible to work around (unfortunately don't remember what that was...). I'll have to check whether that's still the case. Either way I can deal with this one.

[ecraig12345]

Looked into this and probably the issue I ran into before was this one (though it's misleadingly named). I submitted a fix (microsoft/monaco-typescript#49) and also found a workaround which will let us upgrade our Monaco version in the meantime.

[msft-github-bot]

🎉This issue was addressed in #10973, which has now been successfully released as @uifabric/monaco-editor@v0.4.0.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-github-bot]

🎉This issue was addressed in #10973, which has now been successfully released as @uifabric/tsx-editor@v0.10.3.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-github-bot]

🎉This issue was addressed in #10973, which has now been successfully released as @uifabric/fabric-website-resources@v7.4.0.:tada:

Handy links:

• Release Notes
• Official NPM Release