# Fluent UI 0.51.x TMP upgrade issues This document lists the current open issues that will need to be resolved for the upgrade PR. These issues might not be bugs with fluent but the result of known/unknown breaking changes in the versions between 47 and 51. To request an issue to be added to this list, please post it in the thread **TODO add a teams thread to collect issues** ## Known issues ### [FIXED] Search - Click clearing filter briefly rendering popup People + Team filters which are custom Only click dismiss, not keyboard esc ![](https://i.imgur.com/UaSAkDF.gif) ### [REJECTED] Search - focus outline missing on custom popup filters People + Team filters which are custom ![](https://i.imgur.com/Q2gAhhy.gif) (Ling: can be repro in R0) ### [No repro] search - Border for teams and channel dropdown (Roman) ![](https://i.imgur.com/tVSI6Is.png) Wrong repro steps 1. Search for something ![](https://i.imgur.com/J3Lj9n8.png) 2. Open "Messages" search ![](https://i.imgur.com/jzIMwBW.png) 3. Filter by channel ![](https://i.imgur.com/BBam9dI.png) 4. Observe the bug ![](https://i.imgur.com/R0fUs3L.png) Similar issue happens with "From" item ![](https://i.imgur.com/yBPJdCf.png) The issue with the border for Avatar's image can be seen on `master` branch as well ![](https://i.imgur.com/oDg8uW5.png) ### [FIXED] search - slight jerk (Ling) On selecting an item from the team and channel filter, there is a glitch wherein the pill has a slight jerk ( This is happening with the From filter in the messages tab and the Modified By filter in the files tab as well ) [video showing the behavior](https://microsoft-my.sharepoint.com/personal/shikram_microsoft_com/_layouts/15/onedrive.aspx?id=%2Fpersonal%2Fshikram%5Fmicrosoft%5Fcom%2FDocuments%2FMicrosoft%20Teams%20Chat%20Files%2FScreen%20Recording%202020%2D12%2D17%20at%203%2E25%2E33%20PM%2Emov&parent=%2Fpersonal%2Fshikram%5Fmicrosoft%5Fcom%2FDocuments%2FMicrosoft%20Teams%20Chat%20Files&originalPath=aHR0cHM6Ly9taWNyb3NvZnQtbXkuc2hhcmVwb2ludC5jb20vOnY6L3Avc2hpa3JhbS9FYVpMeFZ6eDd1WlByb1dJazBORzFKY0JjSXZkN2UxQVRxQVRvcXFKcTdPc1dBP3J0aW1lPWU3MVVyNnVpMkVn) Reported by Shahid Ikram ### Participants icon font size increase Potentially some small spacing issues here too, might want to do a side by side comparison with master/R0 Before: ![](https://i.imgur.com/9XvysBK.png) Upgrade PR: ![](https://i.imgur.com/0JhMW9H.png) ### [FIXED] Calling - Chat - giphy moves content position right (Ling) ![](https://i.imgur.com/RDswWu3.png) (Ling: Changing the popper boundary works for the giphy picker, but emoticon picker still displays the scrollbar even if it only scrolls for like 1px, a For a complete fix, we need to expose a way in the API to apply a boundary padding - fixed hide overflow in the popup footer) ### [Fixed] search - Bot avatars missing (Juraj) ![](https://i.imgur.com/2y11ngE.png) ### [Fixed] Message actions toolbar items marginx (Juraj) Master: ![](https://i.imgur.com/vuWap6u.png) Upgrade: ![](https://i.imgur.com/VznvOK7.png) ### [FIXED] Calling - Chat - clicking on ... seems to crash chat pane (Ling) (Ling: culprit was a ToolbarPopup that used a disabled button trigger without pointer-events: none style... and we throw the error on our end :-)) ### [FIXED - patch in TMP] Calling app - unable to enable camera (Juraj) ![](https://i.imgur.com/o6xEMpz.png) ### Calling app - smiles popover went wild ![](https://i.imgur.com/S94c8ce.png) Reported by shift ### [FIXED] Breakout rooms - popups in the right rail have an additional underline ![](https://i.imgur.com/oCKquGD.png) Miro: created Github issue: https://github.com/microsoft/fluentui/issues/16216 Reported by Cristina Tapes (Ling: fixed by patch) ### [FIXED] Retry and Delete icons in chat [LING] ![](https://i.imgur.com/AdGlUQL.png) Reported by Matt Bowen ### [FIXED] Keyboard focus in chat participants menu [LING] ![](https://i.imgur.com/JF6tNlM.png) Reported by Matt Bowen ### [FIXED] Raise hand huge in call avatar (Juraj) ![](https://i.imgur.com/DKFFzp0.png) Reported by Devi Malik ### [FIXED - backport] Clicking call history row does nothing https://domoreexp.visualstudio.com/DefaultCollection/MSTeams/_workitems/edit/1410892 Reported by Kon Pik ### [REJECTED] CQF screen two different tab selection colours for checkbox ![](https://i.imgur.com/KAvZ9V5.png) ![](https://i.imgur.com/kcbyGfp.png) (Ling: Happens even on R0/master - need to contact feature team to deterministically render CQF) (Ling: introduced as a bug in master/R0 in this PR https://domoreexp.visualstudio.com/Teamspace/_git/1b255d6e-1545-42ab-9e75-1fb3f0202dfa/pullrequest/281835) Reported by Josh Xu ### [FIXED] search - blue border on clear icon when dropdown are selected [Juraj] ![](https://i.imgur.com/9c0c04w.png) Amber note: we added a div around icon for clearIndicator (but not toggleIndicator). This div is added in Fluent Dropdown.tsx L1560 by adding the following to `box`: `// ...(!search && { tabIndex: 0, role: 'button' }),` So I think we cannot simply remove it. This is probably related to the a11y issue below this issue. Reported by Shahid Ikram ### [FIXED] search a11y - escape key does not clear filter [Juraj] select a filter: ![](https://i.imgur.com/Iza69qx.png) then press escape key, expect to see: ![](https://i.imgur.com/fRBEOxV.png) but instead on upgrade branch we see: ![](https://i.imgur.com/THuTpKQ.png) Reported by Shahid Ikram ### [FIXED] search - hover over the team names the font color of the item changes [Amber] ![](https://i.imgur.com/nyvDsr3.png) Reported by Shahid Ikram ### [REJECTED - repro in master] search - On hovering on the page number, grey background is missing, also the right and the left arrow alignment seems to be a little out of place expected ![](https://i.imgur.com/i39h59u.png) bugged ![](https://i.imgur.com/caMoCIR.png) Reported by Shahid Ikram ### [FIXED] search a11y - On using the keyboard to navigate the tab items the behaviour is different than it was before [LING] expected: ![](https://i.imgur.com/f6XLFWq.png) bugged: ![](https://i.imgur.com/ZstOBs7.png) Reported by Shahid Ikram ### [REJECTED] Some emoji categories display incorrectly in popup * Some categories has a dot in the top right corner * The selection box is rectangle instead of square ![](https://i.imgur.com/nHZpfV4.jpg) (Ling: Seems to be the same behaviour in master) Reported by David Weng ### [ACCEPTED] File actions - on hover chiclet color issue ![](https://i.imgur.com/Ete8iil.png) (jukapsia note: not sure which theme this is but if it is v2, according to https://www.figma.com/file/bD1cO42H6KuWwpyEeNWoIz/Shell20-ShipPlan-POR?node-id=0%3A1 chicklet hover color should be e8e8e8) Shekhar Nain ### [ACCEPTED] File actions - v2 hover color for attachment confirm if this is correct: ![](https://i.imgur.com/4AV2wgD.png) To toggle v2 themes: ![](https://i.imgur.com/4ZFxbCb.png) Shekhar Nain ### [FIXED] Share to teams - Dropdown input area expands when the results are open [Ling] ![](https://i.imgur.com/TqM9PgI.png) Reported bhy Alex Hernandez (Ling: Fix results in removing IE11 hack, need to validate with feature team about IE11 story) ### [ACCEPTED] Ubar - Hangup button got smaller Current golden: ![](https://i.imgur.com/WfYxsEj.png) Upgrade PR ![](https://i.imgur.com/WkMAemy.png) Diff ![](https://i.imgur.com/kZW5JO3.png) Reported by Ling, E2E ### [Rejected] First message's message actions fly out is hidden by the chat header (David W) same issue in master, out of scope for upgrade ### [Rejected] After clicking message reaction to a message, the message action is not able to show by mouse hover, only by mouse click. (David W) same issue in master, out of scope for upgrade ### [Fixed] Search - Channel filter result icons [Ling + Amber] Run a search and in the messages tab filter by 'Team and Channel' ![](https://i.imgur.com/IckGg0I.png) Reported by Shahid Ikram/Priyankar Gupta ### [Fixed] Search - border appears when clicking on chevron on dropdown filters [Ling+Shift+Amber] ![](https://i.imgur.com/5fFM6lV.png) Same thing also for file type ![](https://i.imgur.com/fcltVD8.png) Reported by Shahid Ikram/Priyankar Gupta ### [Fixed] Ubar - Hangup button icon disappears in contrast theme [Amber] ![](https://i.imgur.com/ALDs3UH.png) Reported by Ling, E2E tests ### [Fixed] Red UFD icon still appears in popup, should be white [Amber] ![](https://i.imgur.com/aef5qeO.jpg) Reported by Josh Xu ### [Fixed] confirmations-renderer animations missing (related to smart-replies-renderer) [Juraj] ### [Fixed] Calling app - mute mic notification looks weird [Amber] Behavior in upgrade branch: ![](https://i.imgur.com/uPYkUnX.png) Expected behavior: ![](https://i.imgur.com/nwT4syI.png) Reported by Yuanbo/Amber caused by background color applid to root slot of tooltip instead of content slot. ### [Fixed] Calling app - more menu renders out of window [Shift] ![](https://i.imgur.com/rhqeJJc.png) ![](https://i.imgur.com/3Xp9LgA.png) Reported by fluent ui and CMD teams ### [BACKPORT - MERGED in 51] Calling app - roster title click does not work [Amber] ![](https://i.imgur.com/8cTuLgz.png) To be fixed with backport fixed by PR https://github.com/microsoft/fluentui/pull/16213 ### [Fixed] Calling app - ubar icon color [Shift] ![](https://i.imgur.com/oJoKwBm.png) ![](https://i.imgur.com/AwOZRei.png) Reported Milica Jovanovic Confirmed by Anastasiya Sarmant ### [BACKPORT - MERGED in 51] Breakout rooms - the toggle on Rooms and Assignment view is broken ( you have to click much lower under the arrow to toggle it) [Amber] [link to screen capture](https://microsoft.sharepoint-df.com/:v:/t/ReArchitecture/EZKg1vERpnxIrnXfyyWReZABr32OuK5ez6FdYeNhpG3BcQ?e=sFC0wQ) Miro: bug in FUI Tree - click on children does not expand/collapse fixed by PR https://github.com/microsoft/fluentui/pull/16213 Reported by Cristina Tapes ### [Fixed] Raise hand icon is huge [Shift] ![](https://i.imgur.com/2B0OiRI.png) ![](https://i.imgur.com/5VrDOKz.png) Reported by Milica Jovanovic ### [ACCEPTED] Participant picker dropdown items somehow look broken and shown under a button in tree component ![](https://i.imgur.com/NB70Lr8.png) Wrong z-index maybe ? Reported by Milica Jovanovic, Accepted by Xuan Liu ### [FIXED] Icons in roster for roster actions in participant item menu are tiny [Ling + Amber] ![](https://i.imgur.com/X7cOw7r.png) Reported by Milica Jovanovic fix: xSpacing in lightweight-call-roster-item-container.tsx with-roster-item-actions.tsx <img src="https://i.imgur.com/6pfk7h2.png" width="200"> ### [Fixed] UFD icon in warning UFD type is now red (before it was white) [Shift + Amber] ![](https://i.imgur.com/MOOPONM.png) Before: ![](https://i.imgur.com/ZLmc1pm.png) In 0.47.13 and before color is broken. Since 0.47.14 icon starts to have color. Shift fixed it in TMP to keep this icon with white color Fixed: ![](https://i.imgur.com/T1p3ij2.png) Reported by Milica Jovanovic, Josh Xu Confirmed by Milica. ### [FIXED] Chat participants button moved 5px to the left [Charles] ![](https://i.imgur.com/10sYTIx.png) Reported by Matt Bowen ### [FIXED] Chat participants icon moved 2 px down [Charles] ![](https://i.imgur.com/ZYSjOTx.png) Reported by Matt Bowen Charles: For both bugs above related to the icon we fixed writting overrides for button but the fontsize still looks different from master ### [Fixed] New chat underline incorrect [Amber] ![](https://i.imgur.com/SiOn5gH.png) Reported by Matt Bowen Amber note: caused by borderBottomColor on dropdownStyles focus-within ### [FIXED] ~~Embed roster popper styling~~ [LING] ![](https://i.imgur.com/ak7JUUI.png) It seems that popper v2 adds transform and inset as inline DOM styles which breaks the sizing of the roster for embed. Investigate optional props for this use case *Fixed using !important styles - need to discuss changes to popup to eliminate this in the future* ### [FIXED] Smart replies - feedback (lightbulb) icon not filled on hover [Amber] ![](https://i.imgur.com/6Va8T0z.png) Reported by Alaa Odeh Confirmed by Alaa. Fix: This is in fact not an issue related to Fluent. The code looks like: `<Button iconOnly icon={<LightBulbIcon />} ...` In master, the icon is resolved into `light-bulb.tsx`. Somehow TMP is able to make <Button/> takes shorthand in 0.51 style, I don't know how it's done. In upgrade branch, the shorthand icon is in effect, so the icon being used is `LightBulbIcon.tsx`, which, has the same svg path for both outlined and filled... result in this bug Repro: 1. Make sure smart replies are enabled in settings ![](https://i.imgur.com/onJoxSZ.png) 2. In 1:1 chat you should see them at the right bottom of the chat pane when the other chat member sends you a message that might have a valid smart reply ### [FIXED] Smart replies - Confirmations component doesn't disappear after the timeout Juraj ![](https://i.imgur.com/85J6Yut.png) Repro: 1. Make sure smart replies are enabled in settings ![](https://i.imgur.com/onJoxSZ.png) 2. In 1:1 chat you should see them at the right bottom of the chat pane when the other chat member sends you a message that might have a valid smart reply Reported by Alaa Odeh ### [FIXED] / needs backport of [16208](https://github.com/microsoft/fluentui/pull/16208/files) Labels for Input.Choiceset for adaptive cards have moved to the far right (Juraj) ![](https://i.imgur.com/n2wsJOL.png) Steps to repro similar error: * Search for "Checklist" in messaging extension in N* chat and select the result - "Checklist - Create a shared checklist" * In the task module that pops up, populate the checklist template that pops up with any data. * Click 'Next', and the task module will show a preview of the card. Click 'Send' to send the card. Observe the behavior. Reported by Susan Shen ### [FIXED] Messaging extension search sometimes yields results that are indented (should be flush against the left side) [LING] ![](https://i.imgur.com/26M3NL1.png) Reported by Susan Shen ### [FIXED] Filter pills height is truncated [Amber] Tracked in ADO https://domoreexp.visualstudio.com/MSTeams/_workitems/edit/1395027/ ### [FIXED] Avatar icon positioning & size is incorrect [Ling] Tracked in ADO https://domoreexp.visualstudio.com/MSTeams/_workitems/edit/1395036/ ### [FIXED] Search app - team and channel input [Ling] ![](https://i.imgur.com/1pI9atI.png) https://local.teams.office.com/multi-window/apps/search/hello/view Priyankar Gupta + Shahid Ikram ### [REJECTED] Search app - Channel filter in messages tab [LING] ![](https://i.imgur.com/gyKytlq.png) https://local.teams.office.com/multi-window/apps/search/hello/view (Ling: bottom border seems to be an intentional design change in dropdown, reverting to feature team) Priyankar Gupta + Shahid Ikram ### [FIXED] Search app - Search app avatar pill [Ling] ![](https://i.imgur.com/7MbQlsE.png) https://local.teams.office.com/multi-window/apps/search/hello/view Priyankar Gupta + Shahid Ikram ### [Fixed]File actions - Chevron missing in menu (ROMAN) ![](https://i.imgur.com/Y8LfTWP.png) Shekhar Nain Similar issue as the one below - `indicator` prop was passed the arrow function, which worked in 0.47, but does not work in 0.51 Solution - pass the arrow function to the `children` prop of the `indicator` ![](https://i.imgur.com/4XsJw9G.png) ### [Fixed][Verified] File actions - No text in flyout (ROMAN) ![](https://i.imgur.com/Y8LfTWP.png) Shekhar Nain Notes: error is happening because TMP passes function to `content` prop, which was working in 0.47, but not working in 0.51. Solution - pass that function to `children` props instead. ### [REJECTED] Messaging - First message's message actions fly out is hidden by the chat header (It was said to be fixed already) ![](https://i.imgur.com/sACAxBn.png) Shift: this issue is present in `master` and should be fixed as a quick follow after the upgrade (probably with small tweaks to Popper boundaries) Reported by David Weng ### [REJECTED] Messaging - After clicking message reaction to a message, the message action is not able to show by mouse hover, only by mouse click. (Ling: same behaviour in master already reported [LINK](https://teams.microsoft.com/l/message/19:skypespaces_003e93090785412b992deebcabecbd0b@thread.skype/1605765414662?tenantId=72f988bf-86f1-41af-91ab-2d7cd011db47&groupId=af55e84c-dc67-4e48-9005-86e0b07272f9&parentMessageId=1605659466832&teamName=Microsoft%20Teams&channelName=DF%20Feedback&createdTime=1605765414662)) ### [REJECTED] Messaging - There is a flash of the entire BIM/Popout window sometimes when open gif and emji flyout in compose (David W) [LING] ![](https://i.imgur.com/bICpxPg.gif) (Ling+Juraj+Shift: Can repro on master) ### [FIXED] Reactions missing ellipses + different Icons' spacing (Marat) Prod: ![](https://i.imgur.com/Vxgc8Iy.png) 51: ![](https://i.imgur.com/K1lomx8.png) Reported by ### Bundle size Bundle size increase is not expected, needs to be investigated ## Backports required **Please add the github PR link to the 51 branch when done** * useTriggerElement test fix: * PR in master https://github.com/microsoft/fluentui/pull/16104 * Backported https://github.com/microsoft/fluentui/pull/16348 * Fix Popup onClick if hover is used with context * PR in master https://github.com/microsoft/fluentui/pull/16286#pullrequestreview-557765761 * Backported * Remove default header prop in chat message * PR in master https://github.com/microsoft/fluentui/pull/16321 ### [RELEASED] 0.51.4 * TreeTitle expand with children [merged] * https://github.com/microsoft/fluentui/pull/16213 * Popper tether default * PR to master: https://github.com/microsoft/fluentui/pull/16214 * https://github.com/microsoft/fluentui/pull/16230 * export SplitButtonProps [merged] * PR to master: https://github.com/microsoft/fluentui/pull/16215 * https://github.com/microsoft/fluentui/pull/16223 * Grid template in checkbox label end - commit c298abf7b7f48d660737a5f96a488f1a0820a322 [merged] * Export Attachment body style type * https://github.com/microsoft/fluentui/pull/16280 * Fix Table row click getting swallowed * https://github.com/microsoft/fluentui/pull/16281 * Revert menu styles fixes for IE11 * https://github.com/microsoft/fluentui/pull/16224 * Support React 17 in peer deps for react-component-ref & react-component-event-listener * https://github.com/microsoft/fluentui/pull/16282 * Fix Dropdown onBlur event type ## Review staus |Group|Reviewer|Status|Details |---|---|---|---| |Calls App|Kon P.|blocking|commented, fix in progress N* CMD|Kon P.|blocking N* Core|Blake S|blocking|commented, fixes in progress Foundation|Blake S|blocking N* UI|David W.|blocking Search|Shahid I|blocking|FIXED - pls review again Messaging|David W|blocking|commented, fix in progress Compose||| Extensibility|Daniel S.|commented, response in progress Files|||working on validation and fixes on their side, committed for Wednesday (Shekhar) Modern Meetings|Josh X|commented|FIXED, please review N* Client Arch|Sergii M.|| People|||| Platform User Lifecycle|Sid U.|waiting for review| Shell|Matt B|commented|one more issue remaining to fix TACO|Sinclaire L.|commented|issue resolved, waiting for Fluent UI patch Telemetry||| Fundamentals|Jason X.|commented|waiting for memory gates to run