Question about IDropdownOption key in Fluent UI 9 Dropdown component

[buzzo123]

I've been using Fluent UI 8, and in the Dropdown component, there was the IDropdownOption interface with properties like key and text. However, in Fluent UI 9, I couldn't find a way to set or retrieve the key value of an option. I only see options to retrieve the text value with onOptionSelect.

Am I missing something, or has the key functionality been changed or moved in Fluent UI 9? Any guidance on this matter would be greatly appreciated.

[mikevalentinecanteen]

Hi @buzzo123 - I ran into this issue this week in looking into migrating some PCF controls to V9. I found that if you don't set the Option "value" to your key of your object and the text to the text it seems to default the value to the text. Here is an example that solved this for me. I am using Combobox but I believe the logic is the same for Dropdown.

`/* eslint-disable no-debugger */
import * as React from "react";
import {
Button,
Combobox,
makeStyles,
Option,
tokens,
useId,
} from "@fluentui/react-components";
import type { ComboboxProps, OptionOnSelectData, SelectionEvents } from "@fluentui/react-components";
import {
ITemplateGroupOption,
ITemplateGroupSelectionProps,
} from "../interfaces/ITemplateGroupSelectionProps";
import { Dismiss12Regular } from "@fluentui/react-icons";

const useStyles = makeStyles({
root: {
// Stack the label above the field with a gap
display: "grid",
gridTemplateRows: "repeat(1fr)",
justifyItems: "start",
gap: "2px",
maxWidth: "400px",
},
tagsList: {
listStyleType: "none",
marginBottom: tokens.spacingVerticalXXS,
marginTop: 0,
paddingLeft: 0,
display: "flex",
gridGap: tokens.spacingHorizontalXXS,
},
});

export const TemplateGroupSelection = (
categorySelectionProps: ITemplateGroupSelectionProps,
comboboxProps: Partial
) => {
const comboboxId = useId("combobox-default");
const selectedListId = ${comboboxId}-selection;

const selectedListRef = React.useRef(null);
const comboboxInputRef = React.useRef(null);
const [selectedOptions, setSelectedOptions] = React.useState<
ITemplateGroupOption[]

(
categorySelectionProps.options.filter(
(option) => option.selected || option.required
)
);
const onSelect: ComboboxProps["onOptionSelect"] = (event, data) => {
debugger;
setSelectedOptions(
categorySelectionProps.options.filter((option) =>
data.selectedOptions.includes(option.key)
)
);
};
const onTagClick = (option: string, index: number) => {
debugger;
setSelectedOptions(selectedOptions.filter((o) => o.key !== option));
// setSelectedKeys(selectedKeys.filter((o) => o !== option));
// setSelectedValues(selectedValues.filter((o) => o !== option));
const indexToFocus = index === 0 ? 1 : index - 1;
const optionToFocus = selectedListRef.current?.querySelector(
#${comboboxId}-remove-${indexToFocus}
);
if (optionToFocus) {
(optionToFocus as HTMLButtonElement).focus();
} else {
comboboxInputRef.current?.focus();
}
};
const labelledBy =
selectedOptions.length > 0 ? ${comboboxId} ${selectedListId} : comboboxId;

const styles = useStyles();
return (

{categorySelectionProps.labelText}
{selectedOptions.length ? (

{/* The "Remove" span is used for naming the buttons without affecting the Combobox name */}
<span id={${comboboxId}-remove} hidden>
Remove

{selectedOptions.map((option, i) => (

• 
  <Button
  size="small"
  shape="circular"
  appearance="primary"
  icon={}
  iconPosition="after"
  onClick={() => onTagClick(option.key, i)}
  id={${comboboxId}-remove-${i}}
  aria-labelledby={${comboboxId}-remove ${comboboxId}-remove-${i}}
  >
  {option.text}
  
  

))}

) : null}
<Combobox
aria-labelledby={labelledBy}
placeholder="Select applicable options"
multiselect={true}
selectedOptions={selectedOptions.map((option) => option.key)}
onOptionSelect={onSelect}
ref={comboboxInputRef}
{...comboboxProps}
>
{categorySelectionProps.options.map((option) => (

{option.text}

))}

);
};
`