TagPicker

[paulgildea]

💡 When you create a PR for any of the checklist items, add a link to this Epic under the PR's Related Issues section.

Preparation

• [ ] Open UI Research
  • [link to https://open-ui.org/]
• [x] Create react-* package and component from template
  • https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-tag-picker-preview
• [x] Component Spec authored and reviewed https://github.com/microsoft/fluentui/pull/31000

Implementation

• [x] Component implementation
• [x] Initial conformance and unit tests (validate basic functionality) https://github.com/microsoft/fluentui/pull/31004
• [ ] Initial documentation
  • [x] Storybook stories
  • [x] README.md covering basic usage https://github.com/microsoft/fluentui/pull/31016
  • [ ] MIGRATION.md guide (include v8 and v0)

Validation

• [ ] Add tests
  • [x] Unit and conformance tests https://github.com/microsoft/fluentui/pull/31004
  • [x] VR tests (https://github.com/microsoft/fluentui/pull/31219)
  • [x] Bundle size fixtures https://github.com/microsoft/fluentui/pull/31023
  • [ ] Performance test scenario
  • [x] Accessibility behavior tests https://github.com/microsoft/fluentui/pull/31004
  • [x] Create an issue and run manual accessibility tests: https://github.com/microsoft/fluentui/issues/31037
• [x] Validate with partners
• [x] Run a bug bash with other FUI crews
• [x] Finalize documentation
  • [x] Review and add any missing storybook stories
  • [ ] Finalize migration guide
• [ ] Component released as stable from @fluentui/react-components
  • [ ] Ensure exports are removed from from @fluentui/react-components/unstable
  • [ ] In package.json: Remove the alpha/beta tag from the version number in package.json
  • [ ] In package.json: Change beachball's disallowedChangeTypes to "major", "prerelease"

Dev TODOs

• [x] Make combobox active descendant implementation not reliant on react state
• [x] Remove usages of ComboboxContext that overlaps with ListboxContext
• [x] Encapsulate slot logic for combobox and extract
• [x] Recompose listbox so it's used as a standalone component in the picker
• [x] Recompose TagGroup so that it works with the combobox selection state
• [x] Different input types should be possible through composition instead of entirely different control (input/button)
• [x] Recompose option to include desired entity layout
• [x] Override combobox behaviour that keeps multiselect variants open
• [x] Extract styles from react-combobox and reuse + override
• [x] #30831
• [x] Figure out how to use the picker with useComboboxFilter
• [x] Position expand icon correctly when scrollbar appears
• [x] Implement option grouping (https://github.com/microsoft/fluentui/pull/30934)
• [x] Implement size prop - most likely need to update react-tags package to add size customization (https://github.com/microsoft/fluentui/pull/30742)
• [x] Decide on API or code sameple to align popver to editable area only
• [x] Recompose Tag component to include defaults (i.e. always dismissble) (https://github.com/microsoft/fluentui/pull/30800)
• [x] Address TODOs in code
• [x] Design polish
• [x] Implement secondary action as unstable feature (https://github.com/microsoft/fluentui/pull/30829)
• [x] Ensures disabled state works properly between all controllers (https://github.com/microsoft/fluentui/pull/30822)
• [x] add freeform support https://github.com/microsoft/fluentui/pull/30947

[pradeept95]

Can we have implementation of this component accelerated in V9 please. This is the one major component, and because of it we are not able to completely move to V9. We have both V8 and V9 dependencies on our projects and PeoplePicler is the one major component which is stopping us to get rid of V8 dependencies in our projects.

[briandrouin]

Design Contact: Toshie

ADO task

[gouttierre]

📢"A meeting to align with Teams team and the designers will be scheduled. In the interim, Toshie has aligned with Ling to share implementation thoughts."

[miroslavstastny]

Moving the ETA from Dec 2023 to Feb 2024. We are currently in a prototyping phase, missing design spec. cc @gouttierre

[gouttierre]

📢

• "A meeting was held with the design and engineering teams, and Toshie met with the Outlook team to discuss their needs.
• "Additionally, Toshie synced with Bret and Kay to discuss accessibility.
• "Teams have updated the ETA from Dec 2023 to Feb 2024 as they are currently in the prototyping phase."
• "Toshie to confirm the possible ETA for the design spec completion." "cc @JustSlone here is another component that has shifted, and we should let partners know the new ETA."

[briandrouin]

Ling is prototyping, Toshie is working on spec.

[gouttierre]

📢"Ling is doing the implementation and prototyping. Toshie is moving forward with the design spec and addressing the accessibility concerns with Kay."

[gouttierre]

📢

• Ling is working on PeoplePicker this quarter, starting with some perf improvements to the combobox w/ changes so that more of that component can be reusable. Toshie / Emily has a design review to update ethe spec and Ling will review the changes in the spec.

[gouttierre]

📢

• Viva Goals is asking for the component. Toshie will connect with Rahul. Viva Goals is also looking for Trees in a Table component, i.e. like a detailed list point of view; trees in a DataGrid and pickers.

[gouttierre]

📢

• Ling has made great progress on the component for preview mode this quarter and has shared a prototype [#30306].
• EM's have been informed and will also assign more engineering resources to help with development due to time constraints.
• Toshie contacted Rahul to check that the design spec and needs were satisfactory, and PM confirmed that the preview would be ready by the end of the quarter. cc @tudorpopams , @JustSlone, @ling1726

[gouttierre]

📢

• Ling has been advancing his code branch well, which Bernardo will take over when he is back from his time off next week. . cc @tudorpopams , @JustSlone, @ling1726

[gouttierre]

📢

• PeoplePicker will be renamed to TagPicker.
• Component is mainly missing the following: 1). option grouping 2). size/appearance 3). align popover to text editor 4). disabled state 5). clearable (clear button).
• Bernardo thinks it's possible to release preview without (1) and (3) by the next 2 weeks.
• Ling mentioned that only size/appearance (2) is needed for Teams.
• Gouttierre notified folks at Viva and updated ETA to April.

cc @tudorpopams , @JustSlone, @ling1726, @bsunderhus

[bsunderhus]

First preview release officially available https://www.npmjs.com/package/@fluentui/react-tag-picker-preview

[pradeept95]

Hi @bsunderhus , I exported example to Stackblitz and I got following error. It is same for local project as well!

✘ [ERROR] Could not resolve "../../../react-combobox/src/utils/useOptionCollection"

node_modules/@fluentui/react-tag-picker-preview/lib/utils/useComboboxBaseState.js:2:36:
  2 │ ...ion } from '../../../react-combobox/src/utils/useOptionCollection';
    ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not resolve "../../../react-combobox/src/utils/useSelection"

node_modules/@fluentui/react-tag-picker-preview/lib/utils/useComboboxBaseState.js:3:29:
  3 │ ...eSelection } from '../../../react-combobox/src/utils/useSelection';
    ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: Build failed with 2 errors: node_modules/@fluentui/react-tag-picker-preview/lib/utils/useComboboxBaseState.js:2:36: ERROR: Could not resolve "../../../react-combobox/src/utils/useOptionCollection" node_modules/@fluentui/react-tag-picker-preview/lib/utils/useComboboxBaseState.js:3:29: ERROR: Could not resolve "../../../react-combobox/src/utils/useSelection" at failureErrorWithLog (/home/projects/iz2jvs--run/node_modules/esbuild/lib/main.js:1641:15) at eval (/home/projects/iz2jvs--run/node_modules/esbuild/lib/main.js:1049:25) at eval (/home/projects/iz2jvs--run/node_modules/esbuild/lib/main.js:1517:9) { errors: [Getter/Setter], warnings: [Getter/Setter]

Link : https://stackblitz.com/run?file=src%2Fexample.tsx

[bsunderhus]

Hi @bsunderhus , I exported example to Stackblitz and I got following error. It is same for local project as well!

✘ [ERROR] Could not resolve "../../../react-combobox/src/utils/useOptionCollection"

node_modules/@fluentui/react-tag-picker-preview/lib/utils/useComboboxBaseState.js:2:36:
  2 │ ...ion } from '../../../react-combobox/src/utils/useOptionCollection';
    ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Could not resolve "../../../react-combobox/src/utils/useSelection"

node_modules/@fluentui/react-tag-picker-preview/lib/utils/useComboboxBaseState.js:3:29:
  3 │ ...eSelection } from '../../../react-combobox/src/utils/useSelection';
    ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: Build failed with 2 errors: node_modules/@fluentui/react-tag-picker-preview/lib/utils/useComboboxBaseState.js:2:36: ERROR: Could not resolve "../../../react-combobox/src/utils/useOptionCollection" node_modules/@fluentui/react-tag-picker-preview/lib/utils/useComboboxBaseState.js:3:29: ERROR: Could not resolve "../../../react-combobox/src/utils/useSelection" at failureErrorWithLog (/home/projects/iz2jvs--run/node_modules/esbuild/lib/main.js:1641:15) at eval (/home/projects/iz2jvs--run/node_modules/esbuild/lib/main.js:1049:25) at eval (/home/projects/iz2jvs--run/node_modules/esbuild/lib/main.js:1517:9) { errors: [Getter/Setter], warnings: [Getter/Setter]

Link : https://stackblitz.com/run?file=src%2Fexample.tsx

Thanks for the catch @pradeept95, I'll investigate it immediately!

[pradeept95]

Thank you so much it is working now!

Hi @bsunderhus , Quick question: I am using filtering option in TagPicker but when I type space in keyboard it select the first highlighted option, is there any way I can prevent that, Because I am using async denounced call to backend API while user typing name in the TagPickerInput field and api might have return intermediate multiple options but user still typing to filter out more which might contains space as well.

[bsunderhus]

Thank you so much it is working now!

Hi @bsunderhus , Quick question: I am using filtering option in TagPicker but when I type space in keyboard it select the first highlighted option, is there any way I can prevent that, Because I am using async denounced call to backend API while user typing name in the TagPickerInput field and api might have return intermediate multiple options but user still typing to filter out more which might contains space as well.

This seems like the request to support freeform https://react.fluentui.dev/?path=/docs/components-combobox--default#freeform

I'll take a look into it! 💪🏼

[pradeept95]

Thank you so much!

[bsunderhus]

Thank you so much!

Newest version is available with freeform support @pradeept95

[pradeept95]

Thank you so much. Indeed, solved my use case!

[pradeept95]

I have created two new issues related to this component:

1. #30984
2. #30978

Please let me know if you have any questions!

[bsunderhus]

I have created two new issues related to this component:

1. [Bug]: TagPicker (react-tag-picker-preview) - Keyborg instance k* is being disposed incorrectly #30984
2. [Bug]: TagPicker (react-tag-picker-preview) - not working with Field #30978

Please let me know if you have any questions!

Thanks @pradeept95 , I'll follow them up. The keyborg related I believe it has nothing to do with TagPicker itself, we were having a similar issue with other Tabster related components

[pradeept95]

Awesome, Thank you so much @bsunderhus!

[gouttierre]

📢

• The team has got two big tasks to complete for the stable release:
  1. A bug-bash (it's ongoing from 29th April)
  2. To compile a manual accessibility checklist. Dev is almost done, but needs some assistance in testing on all screen readers [#31037]
• Due to the renaming tasks and the upcoming bank holidays this week and next, we have to postpone the stable release by a week.
• PM to communicate to partners about the week delay.

cc @bsunderhus , @ling1726, @tudorpopams , @JustSlone

[pradeept95]

Hi @bsunderhus I have reported this issue, but what do you think about this? It seems bug to me!

https://github.com/microsoft/fluentui/issues/31259

[bsunderhus]

Hi @bsunderhus I have reported this issue, but what do you think about this? It seems bug to me!

#31259

It is not a bug @pradeept95, after some discussions and investigations from our a11y champions, we've decided to go with this behaviour. Both Space and Enter click when selecting an option will close the dropdown

[pradeept95]

It is great to see this is now in stable release. Thank you everyone for great work! thank you @bsunderhus!

[ravindersharma]

Hi @bsunderhus ,

I recently switched from PeoplePicker to TagPicker for the Fluent UI V8 version. However, there's an issue, which is related TagPickerOption, which is dependent on the Text (String) Property only and does not allow us to add other components as children. The Persona control loaded into TagPickerOption without any issues, but the Filter function started behaving weirdly when I tried to utilize it. This is because, the filter feature works on Text instead of any other component. If we could successfully add a text property to TagPickeroption and use it for the filter, that would be ideal. Or do we have an other option for it. I attached screenshot for both.

Here is a reference to the post that I followed to use it: https://github.com/microsoft/fluentui/discussions/29941

[bsunderhus]

Hi @bsunderhus ,

I recently switched from PeoplePicker to TagPicker for the Fluent UI V8 version. However, there's an issue, which is related TagPickerOption, which is dependent on the Text (String) Property only and does not allow us to add other components as children. The Persona control loaded into TagPickerOption without any issues, but the Filter function started behaving weirdly when I tried to utilize it. This is because, the filter feature works on Text instead of any other component. If we could successfully add a text property to TagPickeroption and use it for the filter, that would be ideal. Or do we have an other option for it. I attached screenshot for both.

Here is a reference to the post that I followed to use it: #29941

Hey there @ravindersharma, would you mind following up in a Feature request with an implementation detail and also some reproduction on why is this not working today?

[ravindersharma]

Hi @bsunderhus , I recently switched from PeoplePicker to TagPicker for the Fluent UI V8 version. However, there's an issue, which is related TagPickerOption, which is dependent on the Text (String) Property only and does not allow us to add other components as children. The Persona control loaded into TagPickerOption without any issues, but the Filter function started behaving weirdly when I tried to utilize it. This is because, the filter feature works on Text instead of any other component. If we could successfully add a text property to TagPickeroption and use it for the filter, that would be ideal. Or do we have an other option for it. I attached screenshot for both. Here is a reference to the post that I followed to use it: #29941

Hey there @ravindersharma, would you mind following up in a Feature request with an implementation detail and also some reproduction on why is this not working today?

Hi @bsunderhus , As You have suggested, I have added it, here it is: https://github.com/microsoft/fluentui/issues/31431