profile
viewpoint

microsoft/fluentui 9851

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

microsoft/beachball 84

The Sunniest Semantic Version Bumper

statm/haxe-astar 11

A* pathfinding algorithm implemented with HaXe, along with some porting code for project FOL.

statm/bubble-sort-benchmark 2

Several implementations of bubble sort, aiming to benchmark the performance of AS, Alchemy and HaXe.

statm/webgame-toolkit 2

Various tools for webgame developing, built with AIR.

disuser/office-ui-fabric-react 1

React components for building experiences for Office and Office 365.

pull request commentmicrosoft/fluentui

feat(checkbox): add indeterminate support

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ae3d379c93afa516ba82626b270c7c98a9445a6a:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration
assuncaocharles

comment created time in 2 minutes

PR opened microsoft/fluentui

Draft: makeStyles() next

Ignore for now.

Mainly to check visual regressions.

+1136 -493

0 comment

19 changed files

pr created time in 2 minutes

push eventmicrosoft/fluentui

Oleksandr Fediashov

commit sha ae244905fd67ccfd2338d11ebfa591ca7e0fbca7

wip on styles conversion

view details

push time in 6 minutes

pull request commentmicrosoft/fluentui

feat(checkbox): add indeterminate support

<!-- 0 failure: 1 warning: There are no upda...

DangerID: danger-id-default; -->

<table> <thead> <tr> <th width="50"></th> <th width="100%" data-danger-table="true">Warnings</th> </tr> </thead> <tbody><tr> <td>:warning:</td> <td>There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.</td> </tr> </tbody> </table>

<p align="right"> Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against a248dea12e0f948e7aecba32ff43370ca4de3b3e </p>

assuncaocharles

comment created time in 22 minutes

pull request commentmicrosoft/fluentui

feat(Tree): useVirtualTree hook + rewrite virtualizedTreePrototype using hook and react-window

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 16c858186809363a9e58a11e217353010116dd37 (build)

YuanboXue-Amber

comment created time in 23 minutes

PR opened microsoft/fluentui

feat(checkbox): add indeterminate support

Pull request checklist

  • [ ] Addresses an existing issue: Fixes #0000
  • [ ] Include a change request file using $ yarn change

Description of changes

This PR adds indeterminate support for Checkbox component

1FvnEgJYcb

Focus areas to test

(optional)

+115 -11

0 comment

7 changed files

pr created time in 24 minutes

pull request commentmicrosoft/fluentui

DO NOT MERGE - Virtualized Tree with Sticky header Prototype

<!-- 0 failure: 1 warning: There are no upda...

DangerID: danger-id-default; -->

<table> <thead> <tr> <th width="50"></th> <th width="100%" data-danger-table="true">Warnings</th> </tr> </thead> <tbody><tr> <td>:warning:</td> <td>There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.</td> </tr> </tbody> </table>

<p align="right"> Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against 5a137b02e7e93f4aedda5a51f7955f21b1692da6 </p>

YuanboXue-Amber

comment created time in an hour

pull request commentmicrosoft/fluentui

feat(Tree): useVirtualTree hook + rewrite virtualizedTreePrototype using hook and react-window

Perf Analysis

<p>No significant results to display.</p><details><summary>All results</summary><p> <table> <tr> <th>Scenario</th> <th>Render type</th> <th> <a href="https://github.com/microsoft/fluentui/wiki/Perf-Testing#why-are-results-listed-in-ticks-instead-of-time-units">Master Ticks</a> </th> <th> <a href="https://github.com/microsoft/fluentui/wiki/Perf-Testing#why-are-results-listed-in-ticks-instead-of-time-units">PR Ticks</a> </th> <th>Iterations</th> <th>Status</th> </tr><tr> <td>Avatar</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Avatar-mount_base.html">828</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Avatar-mount.html">846</a></td> <td>5000</td> <td></td> </tr> <tr> <td>BaseButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/BaseButtonCompat-mount_base.html">939</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/BaseButtonCompat-mount.html">961</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Breadcrumb</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Breadcrumb-mount_base.html">40045</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Breadcrumb-mount.html">41343</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Checkbox</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Checkbox-mount_base.html">1575</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Checkbox-mount.html">1499</a></td> <td>5000</td> <td></td> </tr> <tr> <td>CheckboxBase</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/CheckboxBase-mount_base.html">1284</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/CheckboxBase-mount.html">1297</a></td> <td>5000</td> <td></td> </tr> <tr> <td>ChoiceGroup</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/ChoiceGroup-mount_base.html">4748</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/ChoiceGroup-mount.html">4849</a></td> <td>5000</td> <td></td> </tr> <tr> <td>ComboBox</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/ComboBox-mount_base.html">959</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/ComboBox-mount.html">956</a></td> <td>1000</td> <td></td> </tr> <tr> <td>CommandBar</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/CommandBar-mount_base.html">9658</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/CommandBar-mount.html">9735</a></td> <td>1000</td> <td></td> </tr> <tr> <td>ContextualMenu</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/ContextualMenu-mount_base.html">6011</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/ContextualMenu-mount.html">5907</a></td> <td>1000</td> <td></td> </tr> <tr> <td>DefaultButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/DefaultButtonCompat-mount_base.html">1141</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/DefaultButtonCompat-mount.html">1146</a></td> <td>5000</td> <td></td> </tr> <tr> <td>DetailsRow</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/DetailsRow-mount_base.html">3701</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/DetailsRow-mount.html">3673</a></td> <td>5000</td> <td></td> </tr> <tr> <td>DetailsRowFast</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/DetailsRowFast-mount_base.html">3628</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/DetailsRowFast-mount.html">3704</a></td> <td>5000</td> <td></td> </tr> <tr> <td>DetailsRowNoStyles</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/DetailsRowNoStyles-mount_base.html">3463</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/DetailsRowNoStyles-mount.html">3585</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Dialog</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Dialog-mount_base.html">1435</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Dialog-mount.html">1458</a></td> <td>1000</td> <td></td> </tr> <tr> <td>DocumentCardTitle</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/DocumentCardTitle-mount_base.html">1734</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/DocumentCardTitle-mount.html">1714</a></td> <td>1000</td> <td></td> </tr> <tr> <td>Dropdown</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Dropdown-mount_base.html">3344</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Dropdown-mount.html">3337</a></td> <td>5000</td> <td></td> </tr> <tr> <td>FocusTrapZone</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/FocusTrapZone-mount_base.html">1824</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/FocusTrapZone-mount.html">1750</a></td> <td>5000</td> <td></td> </tr> <tr> <td>FocusZone</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/FocusZone-mount_base.html">1790</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/FocusZone-mount.html">1811</a></td> <td>5000</td> <td></td> </tr> <tr> <td>IconButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/IconButtonCompat-mount_base.html">1797</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/IconButtonCompat-mount.html">1810</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Label</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Label-mount_base.html">331</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Label-mount.html">338</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Layer</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Layer-mount_base.html">1781</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Layer-mount.html">1785</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Link</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Link-mount_base.html">464</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Link-mount.html">474</a></td> <td>5000</td> <td></td> </tr> <tr> <td>MenuButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/MenuButtonCompat-mount_base.html">1470</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/MenuButtonCompat-mount.html">1529</a></td> <td>5000</td> <td></td> </tr> <tr> <td>MessageBar</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/MessageBar-mount_base.html">1931</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/MessageBar-mount.html">1992</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Nav</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Nav-mount_base.html">3291</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Nav-mount.html">3246</a></td> <td>1000</td> <td></td> </tr> <tr> <td>OverflowSet</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/OverflowSet-mount_base.html">994</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/OverflowSet-mount.html">1020</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Panel</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Panel-mount_base.html">1388</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Panel-mount.html">1408</a></td> <td>1000</td> <td></td> </tr> <tr> <td>Persona</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Persona-mount_base.html">851</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Persona-mount.html">849</a></td> <td>1000</td> <td></td> </tr> <tr> <td>Pivot</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Pivot-mount_base.html">1365</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Pivot-mount.html">1397</a></td> <td>1000</td> <td></td> </tr> <tr> <td>PrimaryButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/PrimaryButtonCompat-mount_base.html">1268</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/PrimaryButtonCompat-mount.html">1294</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Rating</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Rating-mount_base.html">7628</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Rating-mount.html">7591</a></td> <td>5000</td> <td></td> </tr> <tr> <td>SearchBox</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/SearchBox-mount_base.html">1371</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/SearchBox-mount.html">1364</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Shimmer</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Shimmer-mount_base.html">2553</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Shimmer-mount.html">2588</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Slider</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Slider-mount_base.html">1947</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Slider-mount.html">1935</a></td> <td>5000</td> <td></td> </tr> <tr> <td>SpinButton</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/SpinButton-mount_base.html">4999</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/SpinButton-mount.html">5014</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Spinner</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Spinner-mount_base.html">409</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Spinner-mount.html">405</a></td> <td>5000</td> <td></td> </tr> <tr> <td>SplitButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/SplitButtonCompat-mount_base.html">3169</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/SplitButtonCompat-mount.html">3174</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Stack</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Stack-mount_base.html">502</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Stack-mount.html">505</a></td> <td>5000</td> <td></td> </tr> <tr> <td>StackWithIntrinsicChildren</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/StackWithIntrinsicChildren-mount_base.html">1487</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/StackWithIntrinsicChildren-mount.html">1524</a></td> <td>5000</td> <td></td> </tr> <tr> <td>StackWithTextChildren</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/StackWithTextChildren-mount_base.html">4578</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/StackWithTextChildren-mount.html">4651</a></td> <td>5000</td> <td></td> </tr> <tr> <td>SwatchColorPicker</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/SwatchColorPicker-mount_base.html">10088</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/SwatchColorPicker-mount.html">10117</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Tabs</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Tabs-mount_base.html">1375</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Tabs-mount.html">1388</a></td> <td>1000</td> <td></td> </tr> <tr> <td>TagPicker</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/TagPicker-mount_base.html">2743</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/TagPicker-mount.html">2837</a></td> <td>5000</td> <td></td> </tr> <tr> <td>TeachingBubble</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/TeachingBubble-mount_base.html">11242</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/TeachingBubble-mount.html">11220</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Text</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Text-mount_base.html">417</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Text-mount.html">430</a></td> <td>5000</td> <td></td> </tr> <tr> <td>TextField</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/TextField-mount_base.html">1381</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/TextField-mount.html">1413</a></td> <td>5000</td> <td></td> </tr> <tr> <td>ThemeProvider</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/ThemeProvider-mount_base.html">2090</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/ThemeProvider-mount.html">2043</a></td> <td>5000</td> <td></td> </tr> <tr> <td>ThemeProvider</td> <td>virtual-rerender</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/ThemeProvider-virtual-rerender_base.html">616</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/ThemeProvider-virtual-rerender.html">635</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Toggle</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Toggle-mount_base.html">785</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/Toggle-mount.html">807</a></td> <td>5000</td> <td></td> </tr> <tr> <td>button</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/button-mount_base.html">679</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/button-mount.html">683</a></td> <td>5000</td> <td></td> </tr> <tr> <td>buttonNative</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/buttonNative-mount_base.html">101</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16080/merge/perf-test/buttonNative-mount.html">111</a></td> <td>5000</td> <td></td> </tr></table></p></details>

Perf Analysis (Fluent)

<details><summary>Perf comparison</summary>

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.49 0.52 0.94:1 2000 982
🦄 Button.Fluent 0.13 0.24 0.54:1 5000 649
🔧 Checkbox.Fluent 0.66 0.37 1.78:1 1000 664
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 850
🔧 Dropdown.Fluent 3.01 0.44 6.84:1 1000 3008
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 799
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 427
🔧 Slider.Fluent 1.64 0.47 3.49:1 1000 1641
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 410
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 586

🔧 Needs work     🎯 On target     🦄 Amazing

</details> <details><summary>Perf tests with no regressions</summary>

Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 198 174 1.14:1
PortalMinimalPerf.default 176 162 1.09:1
RefMinimalPerf.default 255 234 1.09:1
MenuButtonMinimalPerf.default 1812 1674 1.08:1
DatepickerMinimalPerf.default 54278 50596 1.07:1
LabelMinimalPerf.default 526 492 1.07:1
EmbedMinimalPerf.default 4454 4220 1.06:1
FormMinimalPerf.default 514 483 1.06:1
SkeletonMinimalPerf.default 501 471 1.06:1
TreeWith60ListItems.default 233 219 1.06:1
Button.Fluent 649 611 1.06:1
AccordionMinimalPerf.default 181 173 1.05:1
ChatDuplicateMessagesPerf.default 463 441 1.05:1
HeaderMinimalPerf.default 430 411 1.05:1
LayoutMinimalPerf.default 482 461 1.05:1
LoaderMinimalPerf.default 853 809 1.05:1
CardMinimalPerf.default 677 648 1.04:1
PopupMinimalPerf.default 756 724 1.04:1
TooltipMinimalPerf.default 912 875 1.04:1
VideoMinimalPerf.default 717 692 1.04:1
Checkbox.Fluent 664 641 1.04:1
ButtonMinimalPerf.default 199 193 1.03:1
CarouselMinimalPerf.default 516 503 1.03:1
ChatWithPopoverPerf.default 539 522 1.03:1
DropdownMinimalPerf.default 3475 3372 1.03:1
ListCommonPerf.default 794 770 1.03:1
Avatar.Fluent 982 957 1.03:1
Slider.Fluent 1641 1588 1.03:1
BoxMinimalPerf.default 411 403 1.02:1
GridMinimalPerf.default 399 391 1.02:1
HeaderSlotsPerf.default 896 878 1.02:1
InputMinimalPerf.default 1412 1391 1.02:1
MenuMinimalPerf.default 1041 1024 1.02:1
SplitButtonMinimalPerf.default 4068 4002 1.02:1
IconMinimalPerf.default 743 731 1.02:1
Dropdown.Fluent 3008 2961 1.02:1
AttachmentSlotsPerf.default 1225 1214 1.01:1
DividerMinimalPerf.default 464 458 1.01:1
ListNestedPerf.default 682 677 1.01:1
ListWith60ListItems.default 1130 1117 1.01:1
ReactionMinimalPerf.default 454 450 1.01:1
SegmentMinimalPerf.default 412 408 1.01:1
SliderMinimalPerf.default 1584 1576 1.01:1
TableManyItemsPerf.default 2428 2395 1.01:1
TableMinimalPerf.default 475 468 1.01:1
TextAreaMinimalPerf.default 564 556 1.01:1
CustomToolbarPrototype.default 3898 3853 1.01:1
ToolbarMinimalPerf.default 1027 1013 1.01:1
Dialog.Fluent 850 841 1.01:1
Icon.Fluent 799 790 1.01:1
Image.Fluent 427 422 1.01:1
Tooltip.Fluent 586 583 1.01:1
AlertMinimalPerf.default 332 333 1:1
AnimationMinimalPerf.default 428 427 1:1
ButtonOverridesMissPerf.default 1733 1732 1:1
ButtonUseCssPerf.default 918 914 1:1
ButtonUseCssNestingPerf.default 1205 1206 1:1
CheckboxMinimalPerf.default 3208 3202 1:1
FlexMinimalPerf.default 336 336 1:1
ListMinimalPerf.default 586 588 1:1
TreeMinimalPerf.default 851 850 1:1
Text.Fluent 410 411 1:1
AvatarMinimalPerf.default 530 534 0.99:1
ButtonSlotsPerf.default 674 679 0.99:1
RadioGroupMinimalPerf.default 492 496 0.99:1
ChatMinimalPerf.default 719 730 0.98:1
DialogMinimalPerf.default 908 926 0.98:1
ImageMinimalPerf.default 447 458 0.98:1
ItemLayoutMinimalPerf.default 1464 1497 0.98:1
ProviderMinimalPerf.default 1020 1044 0.98:1
StatusMinimalPerf.default 803 816 0.98:1
TextMinimalPerf.default 393 403 0.98:1
ProviderMergeThemesPerf.default 2013 2068 0.97:1
DropdownManyItemsPerf.default 884 923 0.96:1

</details><div id="perfComment9423"/>

YuanboXue-Amber

comment created time in an hour

pull request commentmicrosoft/fluentui

feat(Tree): useVirtualTree hook + rewrite virtualizedTreePrototype using hook and react-window

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1925a8c0493ca19b1d756f75755e61d43f77913d:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration
YuanboXue-Amber

comment created time in 2 hours

pull request commentmicrosoft/fluentui

feat(Tree): useVirtualTree hook + rewrite virtualizedTreePrototype using hook and react-window

<!-- 0 failure: 1 warning: There are no upda...

DangerID: danger-id-default; -->

<table> <thead> <tr> <th width="50"></th> <th width="100%" data-danger-table="true">Warnings</th> </tr> </thead> <tbody><tr> <td>:warning:</td> <td>There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.</td> </tr> </tbody> </table>

<p align="right"> Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against 1925a8c0493ca19b1d756f75755e61d43f77913d </p>

YuanboXue-Amber

comment created time in 2 hours

PR opened microsoft/fluentui

feat(Tree): useVirtualTree hook

Pull request checklist

  • [ ] Addresses an existing issue: Fixes #0000
  • [ ] Include a change request file using $ yarn change

Description of changes

  • create useVirtualTree hook
  • update existing virtualizedTree prototype with useVirtualTree hook and react-window

Focus areas to test

(optional)

+396 -98

0 comment

8 changed files

pr created time in 2 hours

push eventmicrosoft/fluentui

Amber

commit sha 16c858186809363a9e58a11e217353010116dd37

refactor(Tree): BREAKING CHANGE - rework tree as hook (#15831) #### Pull request checklist - [ ] Addresses an existing issue: Fixes #0000 - [ ] Include a change request file using `$ yarn change` #### Description of changes ## Description of the re-work ideas: The key is to create a **flattened tree** (see `flattenTree.ts`). The flattened tree is an object, with key being the id of each tree item, and value being the information of the corresponding tree item: its parent/child, was it selected, ..., etc. Initially the flattened tree is created thru Tree's `props.items`. Then it gets re-created every time when state changes. Meaning every time users select/unselect, expand/collapse a tree node, there will be O(n) time spent on re-creating flattened tree, where n being number of tree items. Why flatten tree: - provides a convenient way of navigating up/down tree. - being the single source of truth for the state (expanded/collapsed, selected) of the tree - together with `getItemById`, provides a context for tree items to access tree information. The flattened tree is then used in `useTree` hook. This hook is a building block for `Tree` component, and a `useVirtualTree` hook (not in this PR yet) for virtualized tree component. ## Breaking changes: - The following props are removed from `TreeItem`: ```ts /** A state of selection indicator. */ selected?: boolean; /** Whether or not tree item is part of the selectable parent. */ selectableParent?: boolean; indeterminate?: boolean; ``` Reason for removal: 1. These props are not in 0.47 version. 2. `selected` and `indeterminate` can be accessed from the flattened tree. (In fact, if possible, I'd like to remove all props that can be accessed from the flattened tree, for example `parent`, `index`, ..., .etc). `selectableParent` is useless in my opinion. - Tree does not create and pass `contentRef` prop to each TreeItem anymore. Originally Tree creates and keeps a map of refs to each tree items, and assigned it to tree item's `contentRef` prop. The new re-worked tree does not do this anymore. But `contentRef` is still kept as a prop for TreeItem. #### Focus areas to test (optional)

view details

push time in 3 hours

PR merged microsoft/fluentui

Reviewers
refactor(Tree): BREAKING CHANGE - rework tree as hook AutoMerge Fluent UI react-northstar

Pull request checklist

  • [ ] Addresses an existing issue: Fixes #0000
  • [ ] Include a change request file using $ yarn change

Description of changes

Description of the re-work ideas:

The key is to create a flattened tree (see flattenTree.ts). The flattened tree is an object, with key being the id of each tree item, and value being the information of the corresponding tree item: its parent/child, was it selected, ..., etc.

Initially the flattened tree is created thru Tree's props.items. Then it gets re-created every time when state changes. Meaning every time users select/unselect, expand/collapse a tree node, there will be O(n) time spent on re-creating flattened tree, where n being number of tree items.

Why flatten tree:

  • provides a convenient way of navigating up/down tree.
  • being the single source of truth for the state (expanded/collapsed, selected) of the tree
  • together with getItemById, provides a context for tree items to access tree information.

The flattened tree is then used in useTree hook. This hook is a building block for Tree component, and a useVirtualTree hook (not in this PR yet) for virtualized tree component.

Breaking changes:

  • The following props are removed from TreeItem:

      /** A state of selection indicator. */
      selected?: boolean;
    
      /** Whether or not tree item is part of the selectable parent. */
      selectableParent?: boolean;
    
      indeterminate?: boolean;
    

    Reason for removal:

    1. These props are not in 0.47 version.
    2. selected and indeterminate can be accessed from the flattened tree. (In fact, if possible, I'd like to remove all props that can be accessed from the flattened tree, for example parent, index, ..., .etc). selectableParent is useless in my opinion.
  • Tree does not create and pass contentRef prop to each TreeItem anymore. Originally Tree creates and keeps a map of refs to each tree items, and assigned it to tree item's contentRef prop. The new re-worked tree does not do this anymore. But contentRef is still kept as a prop for TreeItem.

Focus areas to test

(optional)

+563 -483

5 comments

10 changed files

YuanboXue-Amber

pr closed time in 3 hours

pull request commentmicrosoft/fluentui

refactor(Tree): BREAKING CHANGE - rework tree as hook

<!--[AutoMerge]--> Hello @YuanboXue-Amber!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.
YuanboXue-Amber

comment created time in 3 hours

Pull request review commentmicrosoft/react-native-macos

macOS Keyboard Support

+/*+ * Copyright (c) Facebook, Inc. and its affiliates.+ *+ * This source code is licensed under the MIT license found in the+ * LICENSE file in the root directory of this source tree.+ */++#import "RCTViewKeyboardEvent.h"+#import <React/RCTAssert.h>++@implementation RCTViewKeyboardEvent+++ (instancetype)keyDownEventWithReactTag:(NSNumber *)reactTag characters:(NSString*)characters modifier:(NSUInteger)modifier {+  RCTViewKeyboardEvent *event = [[self alloc] initWithName:@"keyDown"

Should this be a constant? Isn't it duplicated in RCTViewManager? Or is that semantically different but happens to be the same value?

HeyImChris

comment created time in 3 hours

Pull request review commentmicrosoft/react-native-macos

macOS Keyboard Support

 - (BOOL)performDragOperation:(id <NSDraggingInfo>)sender } #endif // ]TODO(macOS ISS#2323203) +#pragma mark - Keyboard Events++#if TARGET_OS_OSX // TODO: add iOS keyboard event handling+- (void)keyDown:(NSEvent *)event {+  if (!self.onKeyDown) {+    [super keyDown:event];+    return;+  }++  RCTViewKeyboardEvent *keyboardEvent = [RCTViewKeyboardEvent keyDownEventWithReactTag:self.reactTag characters:event.characters modifier:event.modifierFlags];+  [_eventDispatcher sendEvent:keyboardEvent];+}+

A common pattern with keyDown:/keyUp: events is for someone to override keyDown: check the type or keys pressed or other info on the event and optionally handle it, else pass the event up the responder chain by calling super. In this react implementation it looks like the presence of an onKeyDown is what determines whether the event gets handled, so how would someone implement a "conditional" key down handler, for example one that responds to arrow keys to move an object but lets other key events pass through to the responder chain to see if someone else handles it?

It looks like the current implementation would just drop all those events on the floor?

HeyImChris

comment created time in 3 hours

issue openedmicrosoft/fluentui

Focus boundary rectangle on dropdown menu items not visible from side

<!-- Before submitting an accessibility issue please ensure the following are true:

  1. Search for dupes! Please make sure the issue is not already present in our issue tracker.
  2. This issue is caused by a Fluent UI React control.
  3. You can reproduce this bug in a CodePen.
  4. There is documentation or best practice that supports your expected behavior (review https://www.w3.org/TR/wai-aria-1.1/ for accessibility guidance.)

PLEASE NOTE:

Do not link to, screenshot or reference a Microsoft product in this description.

Our screen reader support is limited to Edge + Narrator. Please check ARIA component examples to ensure it is not a screen reader or browser issue. Issues that do not reproduce in Edge + Narrator, and aren't caused by obvious invalid aria values, should be filed with the respective screen reading software, not the Fluent UI repo.

Issues that do not meet these guidelines will be closed. -->

Environment Information

  • Package version(s): "office-ui-fabric-react": "7.148.0"
  • Browser and OS versions: Chrome - 87.0.4280.66, Win 10 Enterprise

Describe the issue:

On trying to navigate a multi-select dropdown through keyboard, the focus boundary rectangle on the menu items has missing sides.

Please provide a reproduction of the issue in a codepen:

https://codepen.io/pen/?&prefill_data_id=efbb0b29-92da-4ae0-bd92-6d8c0409229b Same codepen as in official fabric website, can repro there as well.

<!-- Providing an isolated reproduction of the issue in a codepen makes it much easier for us to help you. Here are some ways to get started:

  • Go to https://aka.ms/fluentpen for a starter codepen
  • You can also use the "Export to Codepen" feature for the various components in our documentation site.
  • See http://codepen.io/dzearing/pens/public/?grid_type=list for a variety of examples

Alternatively, you can also use https://aka.ms/fluentdemo to get permanent repro links if the repro occurs with an example. (A permanent link is preferable to "use the website" as the website can change.) -->

Actual behavior:

Focus boundary rectangle has missing sides

Expected behavior:

Focus boundary rectangle should be visible clearly

Documentation describing expected behavior

<!-- fill this out -->

created time in 4 hours

issue commentmicrosoft/fluentui

LineChart tickValues not working

@luckyrass ,

Issue fixed and version released @fluentui/react-charting@v5.0.0-beta.18. Can you please confirm and close work item?

luckyrass

comment created time in 5 hours

startedmicrosoft/glTF-SDK

started time in 5 hours

push eventmicrosoft/VerifiableCredential-SDK-Android

beejones

commit sha 52f56536b17eec1caddde06998b741a48527ff9b

Test performance of sign/verify primitives - reference data EllipticCurveSubtleCryptoPerformanceTest TokenSignerPerformanceTest 0 End sign 16182 End verify 89218 End sign 699976 1 End sign 2824 End verify 13399 End sign 594409 2 End sign 3182 End verify 11185 End sign 598249 3 End sign 3827 End verify 12607 End sign 579835 4 End sign 2387 End verify 7474 End sign 525478 5 End sign 2908 End verify 9780 End sign 579169 6 End sign 2721 End verify 7205 End sign 547622 7 End sign 2204 End verify 6016 End sign 531888 8 End sign 1833 End verify 6166 End sign 537859 9 End sign 991 End verify 5266 End sign 568293

view details

push time in 6 hours

startedbe5invis/Iosevka

started time in 6 hours

issue commentmicrosoft/fluentui

Dropdown option does not show ellipsis in option

Hello @xugao , I am also not able to view the ellipsis. When I added the following CSS (shown in the image) in the class="ms-Button-flexContainer flexContainer-323" in the browser's Inspect Element for the option which was having longer text, it came. Can you help in which element we need to add the CSS to make the ellipsis work? image

shrallap

comment created time in 8 hours

pull request commentmicrosoft/fluentui

Fix ComboBox onBlur when relatedTarget is an ancestor to menu

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-ComboBox 233.51 kB 233.623 kB ExceedsBaseline     113 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 91ae1fdd90eb0386147b55de80e774ef7f1ef0cb (build)

marwankhalili

comment created time in 15 hours

pull request commentmicrosoft/fluentui

Fix ComboBox onBlur when relatedTarget is an ancestor to menu

Perf Analysis

<p>No significant results to display.</p><details><summary>All results</summary><p> <table> <tr> <th>Scenario</th> <th>Render type</th> <th> <a href="https://github.com/microsoft/fluentui/wiki/Perf-Testing#why-are-results-listed-in-ticks-instead-of-time-units">Master Ticks</a> </th> <th> <a href="https://github.com/microsoft/fluentui/wiki/Perf-Testing#why-are-results-listed-in-ticks-instead-of-time-units">PR Ticks</a> </th> <th>Iterations</th> <th>Status</th> </tr><tr> <td>Avatar</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Avatar-mount_base.html">834</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Avatar-mount.html">852</a></td> <td>5000</td> <td></td> </tr> <tr> <td>BaseButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/BaseButtonCompat-mount_base.html">945</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/BaseButtonCompat-mount.html">929</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Breadcrumb</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Breadcrumb-mount_base.html">41401</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Breadcrumb-mount.html">40986</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Checkbox</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Checkbox-mount_base.html">1712</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Checkbox-mount.html">1632</a></td> <td>5000</td> <td></td> </tr> <tr> <td>CheckboxBase</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/CheckboxBase-mount_base.html">1408</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/CheckboxBase-mount.html">1391</a></td> <td>5000</td> <td></td> </tr> <tr> <td>ChoiceGroup</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/ChoiceGroup-mount_base.html">5116</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/ChoiceGroup-mount.html">5252</a></td> <td>5000</td> <td></td> </tr> <tr> <td>ComboBox</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/ComboBox-mount_base.html">1034</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/ComboBox-mount.html">993</a></td> <td>1000</td> <td></td> </tr> <tr> <td>CommandBar</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/CommandBar-mount_base.html">10290</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/CommandBar-mount.html">10219</a></td> <td>1000</td> <td></td> </tr> <tr> <td>ContextualMenu</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/ContextualMenu-mount_base.html">6518</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/ContextualMenu-mount.html">6319</a></td> <td>1000</td> <td></td> </tr> <tr> <td>DefaultButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/DefaultButtonCompat-mount_base.html">1192</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/DefaultButtonCompat-mount.html">1200</a></td> <td>5000</td> <td></td> </tr> <tr> <td>DetailsRow</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/DetailsRow-mount_base.html">3877</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/DetailsRow-mount.html">3863</a></td> <td>5000</td> <td></td> </tr> <tr> <td>DetailsRowFast</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/DetailsRowFast-mount_base.html">3872</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/DetailsRowFast-mount.html">3915</a></td> <td>5000</td> <td></td> </tr> <tr> <td>DetailsRowNoStyles</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/DetailsRowNoStyles-mount_base.html">3775</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/DetailsRowNoStyles-mount.html">3693</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Dialog</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Dialog-mount_base.html">1586</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Dialog-mount.html">1591</a></td> <td>1000</td> <td></td> </tr> <tr> <td>DocumentCardTitle</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/DocumentCardTitle-mount_base.html">2046</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/DocumentCardTitle-mount.html">2004</a></td> <td>1000</td> <td></td> </tr> <tr> <td>Dropdown</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Dropdown-mount_base.html">3638</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Dropdown-mount.html">3676</a></td> <td>5000</td> <td></td> </tr> <tr> <td>FocusTrapZone</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/FocusTrapZone-mount_base.html">1934</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/FocusTrapZone-mount.html">1906</a></td> <td>5000</td> <td></td> </tr> <tr> <td>FocusZone</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/FocusZone-mount_base.html">1957</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/FocusZone-mount.html">1974</a></td> <td>5000</td> <td></td> </tr> <tr> <td>IconButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/IconButtonCompat-mount_base.html">1960</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/IconButtonCompat-mount.html">1933</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Label</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Label-mount_base.html">364</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Label-mount.html">363</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Layer</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Layer-mount_base.html">1961</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Layer-mount.html">1949</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Link</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Link-mount_base.html">521</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Link-mount.html">511</a></td> <td>5000</td> <td></td> </tr> <tr> <td>MenuButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/MenuButtonCompat-mount_base.html">1686</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/MenuButtonCompat-mount.html">1698</a></td> <td>5000</td> <td></td> </tr> <tr> <td>MessageBar</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/MessageBar-mount_base.html">2154</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/MessageBar-mount.html">2180</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Nav</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Nav-mount_base.html">3566</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Nav-mount.html">3435</a></td> <td>1000</td> <td></td> </tr> <tr> <td>OverflowSet</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/OverflowSet-mount_base.html">1092</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/OverflowSet-mount.html">1131</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Panel</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Panel-mount_base.html">1522</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Panel-mount.html">1538</a></td> <td>1000</td> <td></td> </tr> <tr> <td>Persona</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Persona-mount_base.html">941</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Persona-mount.html">958</a></td> <td>1000</td> <td></td> </tr> <tr> <td>Pivot</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Pivot-mount_base.html">1498</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Pivot-mount.html">1506</a></td> <td>1000</td> <td></td> </tr> <tr> <td>PrimaryButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/PrimaryButtonCompat-mount_base.html">1397</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/PrimaryButtonCompat-mount.html">1461</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Rating</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Rating-mount_base.html">8373</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Rating-mount.html">8343</a></td> <td>5000</td> <td></td> </tr> <tr> <td>SearchBox</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/SearchBox-mount_base.html">1463</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/SearchBox-mount.html">1458</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Shimmer</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Shimmer-mount_base.html">2832</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Shimmer-mount.html">2892</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Slider</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Slider-mount_base.html">2128</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Slider-mount.html">2074</a></td> <td>5000</td> <td></td> </tr> <tr> <td>SpinButton</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/SpinButton-mount_base.html">5194</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/SpinButton-mount.html">5390</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Spinner</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Spinner-mount_base.html">433</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Spinner-mount.html">432</a></td> <td>5000</td> <td></td> </tr> <tr> <td>SplitButtonCompat</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/SplitButtonCompat-mount_base.html">3362</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/SplitButtonCompat-mount.html">3347</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Stack</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Stack-mount_base.html">524</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Stack-mount.html">516</a></td> <td>5000</td> <td></td> </tr> <tr> <td>StackWithIntrinsicChildren</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/StackWithIntrinsicChildren-mount_base.html">1562</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/StackWithIntrinsicChildren-mount.html">1617</a></td> <td>5000</td> <td></td> </tr> <tr> <td>StackWithTextChildren</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/StackWithTextChildren-mount_base.html">4799</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/StackWithTextChildren-mount.html">4947</a></td> <td>5000</td> <td></td> </tr> <tr> <td>SwatchColorPicker</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/SwatchColorPicker-mount_base.html">10578</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/SwatchColorPicker-mount.html">10623</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Tabs</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Tabs-mount_base.html">1519</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Tabs-mount.html">1520</a></td> <td>1000</td> <td></td> </tr> <tr> <td>TagPicker</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/TagPicker-mount_base.html">2865</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/TagPicker-mount.html">2981</a></td> <td>5000</td> <td></td> </tr> <tr> <td>TeachingBubble</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/TeachingBubble-mount_base.html">11896</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/TeachingBubble-mount.html">11948</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Text</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Text-mount_base.html">420</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Text-mount.html">429</a></td> <td>5000</td> <td></td> </tr> <tr> <td>TextField</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/TextField-mount_base.html">1504</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/TextField-mount.html">1451</a></td> <td>5000</td> <td></td> </tr> <tr> <td>ThemeProvider</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/ThemeProvider-mount_base.html">2247</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/ThemeProvider-mount.html">2287</a></td> <td>5000</td> <td></td> </tr> <tr> <td>ThemeProvider</td> <td>virtual-rerender</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/ThemeProvider-virtual-rerender_base.html">687</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/ThemeProvider-virtual-rerender.html">681</a></td> <td>5000</td> <td></td> </tr> <tr> <td>Toggle</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Toggle-mount_base.html">889</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/Toggle-mount.html">843</a></td> <td>5000</td> <td></td> </tr> <tr> <td>button</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/button-mount_base.html">740</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/button-mount.html">725</a></td> <td>5000</td> <td></td> </tr> <tr> <td>buttonNative</td> <td>mount</td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/buttonNative-mount_base.html">122</a></td> <td><a href="http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/16078/merge/perf-test/buttonNative-mount.html">133</a></td> <td>5000</td> <td></td> </tr></table></p></details>

Perf Analysis (Fluent)

<details><summary>Perf comparison</summary>

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.51 0.92:1 2000 937
🦄 Button.Fluent 0.12 0.24 0.5:1 5000 606
🔧 Checkbox.Fluent 0.64 0.33 1.94:1 1000 644
🎯 Dialog.Fluent 0.17 0.22 0.77:1 5000 826
🔧 Dropdown.Fluent 2.89 0.41 7.05:1 1000 2890
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 762
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 415
🔧 Slider.Fluent 1.52 0.43 3.53:1 1000 1522
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 394
🦄 Tooltip.Fluent 0.11 0.88 0.13:1 5000 566

🔧 Needs work     🎯 On target     🦄 Amazing

</details> <details><summary>Perf tests with no regressions</summary>

Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 211 191 1.1:1
FlexMinimalPerf.default 335 311 1.08:1
PortalMinimalPerf.default 171 159 1.08:1
TextAreaMinimalPerf.default 588 551 1.07:1
AvatarMinimalPerf.default 539 510 1.06:1
DividerMinimalPerf.default 416 393 1.06:1
ReactionMinimalPerf.default 446 422 1.06:1
RefMinimalPerf.default 243 230 1.06:1
SkeletonMinimalPerf.default 477 452 1.06:1
AttachmentMinimalPerf.default 174 166 1.05:1
DropdownManyItemsPerf.default 801 761 1.05:1
ItemLayoutMinimalPerf.default 1401 1335 1.05:1
LabelMinimalPerf.default 472 449 1.05:1
ListMinimalPerf.default 545 519 1.05:1
ListWith60ListItems.default 975 927 1.05:1
TreeWith60ListItems.default 222 211 1.05:1
LayoutMinimalPerf.default 442 425 1.04:1
LoaderMinimalPerf.default 764 732 1.04:1
Icon.Fluent 762 736 1.04:1
BoxMinimalPerf.default 408 396 1.03:1
ButtonUseCssPerf.default 860 838 1.03:1
CarouselMinimalPerf.default 477 464 1.03:1
DialogMinimalPerf.default 836 813 1.03:1
GridMinimalPerf.default 393 382 1.03:1
PopupMinimalPerf.default 707 689 1.03:1
SplitButtonMinimalPerf.default 3939 3824 1.03:1
StatusMinimalPerf.default 805 784 1.03:1
ToolbarMinimalPerf.default 1011 978 1.03:1
Button.Fluent 606 591 1.03:1
AttachmentSlotsPerf.default 1188 1165 1.02:1
ChatWithPopoverPerf.default 488 478 1.02:1
RadioGroupMinimalPerf.default 485 476 1.02:1
TreeMinimalPerf.default 956 933 1.02:1
VideoMinimalPerf.default 687 674 1.02:1
Dialog.Fluent 826 810 1.02:1
AccordionMinimalPerf.default 171 169 1.01:1
ButtonSlotsPerf.default 623 618 1.01:1
ButtonUseCssNestingPerf.default 1110 1099 1.01:1
CardMinimalPerf.default 632 628 1.01:1
DatepickerMinimalPerf.default 47150 46904 1.01:1
HeaderMinimalPerf.default 409 406 1.01:1
HeaderSlotsPerf.default 865 856 1.01:1
InputMinimalPerf.default 1325 1308 1.01:1
ListCommonPerf.default 708 704 1.01:1
MenuMinimalPerf.default 915 904 1.01:1
ProviderMinimalPerf.default 980 969 1.01:1
SegmentMinimalPerf.default 398 393 1.01:1
TextMinimalPerf.default 390 386 1.01:1
TooltipMinimalPerf.default 822 816 1.01:1
Avatar.Fluent 937 926 1.01:1
Checkbox.Fluent 644 639 1.01:1
Dropdown.Fluent 2890 2869 1.01:1
ButtonOverridesMissPerf.default 1726 1723 1:1
EmbedMinimalPerf.default 4121 4102 1:1
ListNestedPerf.default 617 618 1:1
ProviderMergeThemesPerf.default 1964 1969 1:1
SliderMinimalPerf.default 1537 1532 1:1
IconMinimalPerf.default 730 733 1:1
TableManyItemsPerf.default 2350 2350 1:1
CustomToolbarPrototype.default 3770 3771 1:1
Slider.Fluent 1522 1519 1:1
Text.Fluent 394 395 1:1
ChatMinimalPerf.default 657 661 0.99:1
CheckboxMinimalPerf.default 2883 2898 0.99:1
DropdownMinimalPerf.default 2885 2903 0.99:1
MenuButtonMinimalPerf.default 1619 1633 0.99:1
AlertMinimalPerf.default 344 351 0.98:1
FormMinimalPerf.default 462 472 0.98:1
TableMinimalPerf.default 443 453 0.98:1
Tooltip.Fluent 566 579 0.98:1
AnimationMinimalPerf.default 423 434 0.97:1
Image.Fluent 415 426 0.97:1
ChatDuplicateMessagesPerf.default 425 447 0.95:1
ImageMinimalPerf.default 416 448 0.93:1

</details><div id="perfComment9423"/>

marwankhalili

comment created time in 16 hours

pull request commentmicrosoft/fluentui

Fix ComboBox onBlur when relatedTarget is an ancestor to menu

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3e02dee8eed71661b282008a352a4666cbd9eb67:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration
marwankhalili

comment created time in 16 hours

PR opened microsoft/fluentui

Reviewers
Fix ComboBox onBlur when relatedTarget is an ancestor to menu

Pull request checklist

  • [x] Addresses an existing issue: Fixes #16077
  • [x] Include a change request file using $ yarn change

Description of changes

ComboBox onBlur function will now call _submitPendingValue if the event was triggered by an ancestor element to the ComboBox's dropdown menu.

Previously, the onBlur function would return without doing anything in this case. The intended behavior was to ignore onblur events triggered by ancestor elements that were located within the menu (e.g. scrollbar when the menu is too small), however it only checks that the relatedTarget element is an ancestor to the menu and not its location (see examples in #16077).

Focus areas to test

I've focused on visual regression tests for ComboBox with allowFreeform and triggering onBlur on related elements. Also tested IE11 compatibility.

+26 -15

0 comment

2 changed files

pr created time in 16 hours

pull request commenttest-organization-kkjeer/rubengu-test

Automatic hash update for WhatsApp

<samp> Azure Pipelines successfully started running 1 pipeline(s).<br>

</samp>

wingetbot

comment created time in 16 hours

pull request commenttest-organization-kkjeer/rubengu-test

Automatic hash update for WhatsApp

<samp> Azure Pipelines successfully started running 1 pipeline(s).<br>

</samp>

wingetbot

comment created time in 16 hours

pull request commenttest-organization-kkjeer/rubengu-test

Automatic hash update for WhatsApp

<samp> Azure Pipelines successfully started running 1 pipeline(s).<br>

</samp>

wingetbot

comment created time in 16 hours

pull request commenttest-organization-kkjeer/rubengu-test

Automatic hash update for WhatsApp

<samp> Azure Pipelines successfully started running 1 pipeline(s).<br>

</samp>

wingetbot

comment created time in 16 hours

more