Closed paulgildea closed 2 months ago
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.
Design Contact: Toshie
📢"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."
Moving the ETA from Dec 2023 to Feb 2024. We are currently in a prototyping phase, missing design spec. cc @gouttierre
📢
Toshie
synced with Bret
and Kay
to discuss accessibility
. 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."Ling is prototyping, Toshie is working on spec.
📢"Ling is doing the implementation and prototyping. Toshie is moving forward with the design spec and addressing the accessibility concerns with Kay."
📢
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.📢
📢
📢
📢
PeoplePicker
will be renamed to TagPicker
. option grouping
2). size/appearance
3). align popover to text editor
4). disabled state
5). clearable (clear button)
. cc @tudorpopams , @JustSlone, @ling1726, @bsunderhus
First preview release officially available https://www.npmjs.com/package/@fluentui/react-tag-picker-preview
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
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!
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.
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! 💪🏼
Thank you so much!
Thank you so much!
Newest version is available with freeform
support @pradeept95
Thank you so much. Indeed, solved my use case!
I have created two new issues related to this component:
Please let me know if you have any questions!
I have created two new issues related to this component:
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
Awesome, Thank you so much @bsunderhus!
📢
cc @bsunderhus , @ling1726, @tudorpopams , @JustSlone
Hi @bsunderhus I have reported this issue, but what do you think about this? It seems bug to me!
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
It is great to see this is now in stable release. Thank you everyone for great work! thank you @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: https://github.com/microsoft/fluentui/discussions/29941
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 , 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
💡 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
Implementation
Validation
@fluentui/react-components
https://github.com/microsoft/fluentui/pull/31321@fluentui/react-components/unstable
disallowedChangeTypes
to"major", "prerelease"
Dev TODOs
ComboboxContext
that overlaps withListboxContext
Tag
component to include defaults (i.e. always dismissble) (https://github.com/microsoft/fluentui/pull/30800)disabled
state works properly between all controllers (https://github.com/microsoft/fluentui/pull/30822)freeform
support https://github.com/microsoft/fluentui/pull/30947