diff --git a/change/@fluentui-react-tag-picker-7980ff9b-a205-4ac9-a45d-b3043836e532.json b/change/@fluentui-react-tag-picker-7980ff9b-a205-4ac9-a45d-b3043836e532.json new file mode 100644 index 00000000000000..1056aabaf54130 --- /dev/null +++ b/change/@fluentui-react-tag-picker-7980ff9b-a205-4ac9-a45d-b3043836e532.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore(react-tag-picker): ensure no toggle behaviour when re-selecting already selected data", + "packageName": "@fluentui/react-tag-picker", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPicker.ts b/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPicker.ts index 6c658638188a40..ada2db9cf8cb22 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPicker.ts +++ b/packages/react-components/react-tag-picker/library/src/components/TagPicker/useTagPicker.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities'; +import { elementContains, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities'; import type { TagPickerOnOpenChangeData, TagPickerOnOptionSelectData, @@ -70,7 +70,6 @@ export const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => }); const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover); - return { activeDescendantController, components: {}, @@ -98,7 +97,23 @@ export const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => getOptionsMatchingValue: comboboxState.getOptionsMatchingValue, registerOption: comboboxState.registerOption, selectedOptions: comboboxState.selectedOptions, - selectOption: comboboxState.selectOption, + selectOption: useEventCallback((event, data) => { + // if the option is already selected, invoke onOptionSelect callback with current selected values + // the combobox state would unselect the option, which is not the behavior expected + if ( + comboboxState.selectedOptions.includes(data.value) && + !elementContains(tagPickerGroupRef.current, event.target as Node) + ) { + props.onOptionSelect?.(event, { + selectedOptions: comboboxState.selectedOptions, + value: data.value, + type: event.type, + event, + } as TagPickerOnOptionSelectData); + return; + } + comboboxState.selectOption(event, data); + }), setHasFocus: comboboxState.setHasFocus, setOpen: comboboxState.setOpen, setValue: comboboxState.setValue,