Combobox display value

[jimjacob29]

Component

Combobox

Package version

9.54.17

React version

18.3.1

Environment

System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M1
    Memory: 124.70 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Browsers:
    Brave Browser: 129.1.70.123
    Chrome: 131.0.6778.109
    Edge: 131.0.2903.86
    Safari: 16.1
  npmPackages:
    @aliakbarazizi/headless-datepicker: ^2.0.2 => 2.0.2 
    @chamaeleonidae/chmln: ^1.0.1 => 1.0.1 
    @faker-js/faker: ^8.2.0 => 8.4.1 
    @fluentui/react-components: ^9.54.17 => 9.55.1 
    @fluentui/react-datepicker-compat: ^0.4.53 => 0.4.53 
    @headlessui/react: ^1.7.17 => 1.7.19 
    @headlessui/tailwindcss: ^0.2.0 => 0.2.1 
    @reduxjs/toolkit: ^1.9.7 => 1.9.7 
    @tailwindcss/forms: ^0.5.6 => 0.5.9 
    @tailwindcss/typography: ^0.5.14 => 0.5.15 
    @tanstack/react-table: ^8.10.7 => 8.20.5 
    @types/chamaeleonidae__chmln: ^1.0.0 => 1.0.0 
    @types/dompurify: ^3.0.5 => 3.0.5 
    @types/node: 20.8.10 => 20.8.10 
    @types/react: 18.3.5 => 18.3.5 
    @types/react-beautiful-dnd: ^13.1.7 => 13.1.8 
    @types/react-dom: 18.2.14 => 18.2.14 
    @types/react-mentions: ^4.1.11 => 4.4.0 
    @types/react-redux: ^7.1.28 => 7.1.34 
    ahooks: ^3.7.8 => 3.8.1 
    autoprefixer: 10.4.16 => 10.4.16 
    chart.js: ^4.4.0 => 4.4.5 
    class-variance-authority: ^0.6.1 => 0.6.1 
    clsx: ^1.2.1 => 1.2.1 
    date-fns: ^2.30.0 => 2.30.0 
    dompurify: ^3.1.6 => 3.1.7 
    dotenv: ^16.3.1 => 16.4.5 
    eslint-config-next: 14.2.11 => 14.2.11 
    firebase: ^10.0.0 => 10.14.1 
    googleapis: ^134.0.0 => 134.0.0 
    lottie-react: ^2.4.0 => 2.4.0 
    next: 14.2.11 => 14.2.11 
    nuka-carousel: ^6.0.3 => 6.0.3 
    postcss: 8.4.31 => 8.4.31 
    prettier: ^3.1.1 => 3.3.3 
    prettier-plugin-tailwindcss: ^0.5.9 => 0.5.14 
    react: 18.3.1 => 18.3.1 
    react-beautiful-dnd: ^13.1.1 => 13.1.1 
    react-chartjs-2: ^5.2.0 => 5.2.0 
    react-dom: 18.3.1 => 18.3.1 
    react-google-drive-picker: ^1.2.2 => 1.2.2 
    react-hook-form: ^7.47.0 => 7.53.1 
    react-joyride: ^2.7.2 => 2.9.2 
    react-markdown: ^9.0.1 => 9.0.1 
    react-mentions: ^4.4.10 => 4.4.10 
    react-player: ^2.13.0 => 2.16.0 
    react-redux: ^8.1.3 => 8.1.3 
    react-responsive: ^9.0.2 => 9.0.2 
    react-toastify: ^9.1.3 => 9.1.3 
    react-tooltip: ^5.25.1 => 5.28.0 
    remark-emoji: ^5.0.1 => 5.0.1 
    sharp: ^0.33.5 => 0.33.5 
    tailwindcss: ^3.3.5 => 3.4.14 
    typescript: 5.2.2 => 5.2.2

Current Behavior

I have an array of [ id , value] . I want them to be used in a Combobox. I can't pass an array of string because my value may be repeating and i have unique id. But i need to display the value passed to the user and maintain the id for calling api .
i handled handle this by following -

options?.map?.((option: OptionType) => ( <Option key={option?.id} text={option?.value} value={option?.id} title={option?.value}/>

but now i can't control the display value on the trigger because i need to pass array of id to selectedOptions not the value. What is the solution for this ?

Another issue how to control the input value for the combobox. Just see your documentation there is no mention of onInput.

Expected Behavior

there should be some way to control the text in the trigger

Reproduction

import React from "react"; import { DropdownProps, makeStyles, Option, useId, Combobox } from "@fluentui/react-components"; import CustomText from "@/components/fluent/text"; const useStyles = makeStyles({ dropdown: { minWidth: "unset !important", }, truncatedText: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: "300", }, optionText: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", }, }); interface OptionType { id: string; value: string; icon?: React.ReactNode; } interface CustomComboBoxProps { options?: OptionType[]; onChange?: (value: OptionType | OptionType[]) => void; selectedValueStyle?: string; optionClassName?: string; listboxClassName?: string; optionProps?: Record<string, any>; multiselect?: boolean; placeholder?: string; className?: string; selectedOptions: string[] | undefined; children?: React.ReactNode; listbox?: DropdownProps["listbox"]; isSearchable?: boolean; defaultSelectedOptions?: string[]; [key: string]: any; } const CustomComboBox: React.FC = ({ options, onChange, listbox, selectedValueStyle = "", optionClassName = "", className = "", listboxClassName = "", optionProps = {}, selectedOptions = [], defaultSelectedOptions = [], multiselect = false, placeholder = "Select option(s)", children, ...props }) => { const styles = useStyles(); const dropdownId = useId("combobox"); const handleChange: DropdownProps["onOptionSelect"] = (event, data) => { if (multiselect) { const selectedObjects = data.selectedOptions.map((id) => options?.find((option: OptionType) => option?.id === id) || { id, value: id }); onChange && onChange(selectedObjects); } else { const selectedObject = options?.find((option: OptionType) => option?.id === data?.optionValue) || { id: data.optionValue as string, value: data.optionText as string, }; onChange && onChange(selectedObject); } }; const getDisplayValue = (id: string): string => { const option = options?.find?.((opt) => opt.id === id); return option ? option.value : id; }; // Convert selectedOptions (IDs) to their corresponding display values const selectedDisplayValues = selectedOptions.map(getDisplayValue); return ( <Combobox id={dropdownId} onOptionSelect={handleChange} className={fluentFontOverride h-full w-full ${className} ${styles.dropdown}} listbox={listbox || { className: "!max-h-[300px]" }} multiselect={multiselect} placeholder={placeholder} selectedOptions={selectedOptions} value={selectedOptions[0]} {...props} > {options ? options?.map?.((option: OptionType) => ( <Option key={option?.id} text={option?.value} value={option?.id} title={option?.value} style={{ minHeight: "30px" }} className={ ${optionClassName} ${styles.optionText}} {...optionProps} > <> {!!option?.icon && option?.icon} <CustomText className={text-fluent-neutralForeground2Rest ${styles.optionText}} size={300} weight="regular"> {option?.value} </> )) : children} ); }; export default CustomComboBox;

Steps to reproduce

giving the code i am trying to use could you modify it so that things can be handled

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[behowell]

HI @jimjacob29, I've converted your issue to a discussion, since this is a question about usage of Combobox.

The display value can be controlled using the value prop. You can set it even if you're also setting selectedOptions. See this example: https://react.fluentui.dev/?path=/docs/components-combobox--docs#controlled (the second combobox in that example).

The onInput prop is forwarded directly to the input element. It should work just like a normal React onInput event. The example linked above also shows how to use onInput.

If you still have questions, please include a link to a Stackblitz with the repro, rather than pasting the code directly in the question. You can get started with a Stackblitz by clicking on "Open in Stackblitz" on any of the examples on the documentation page, such as the one I linked above.

Thanks!