[Bug]: Controlled combobox dropping user input

[nanabear0]

Component

Combobox

Package version

9.68.3

React version

17.0.2

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 22.37 GB / 63.71 GB
  Browsers:
    Chrome: 143.0.7499.193
    Edge: Chromium (142.0.3595.94)
    Firefox Developer Edition: 148.0 - C:\Program Files\Firefox Developer Edition\firefox.exe

Current Behavior

When using controlled combobox, if user types in the input box after making a selection (if what they type isn't a prefix in the list of values) what they type gets dropped.

Expected Behavior

User input shouldn't be cleared. The onOptionSelect event shows optionText as empty so when updatng the value to this value it clears user input. The callbacks should provide a way to differentiate this case so that what user typed can be preserved.

Reproduction

https://stackblitz.com/edit/u56b6ceq?file=src%2Fexample.tsx

Steps to reproduce

1. Click the second combobox (controlled section)
2. select Wanda Howard
3. Click second combobox again and select all of the text
4. Type z
5. Observe the user input has been dropped

I have just forked the Controlled example from combobox storybook. It also can be repro'd with the filtered example in the story book

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

Feedback for m365 products (like office/teams/outlook)

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.

[mainframev]

Hello @nanabear0 👋🏻

This is not a bug in the component implementation; it seems to be intentional by storybook example design. I do not see an accessibility issue here. Both behaviors - preserving the input or clearing it are valid.

If you want to preserve the input even when there are no available selection options, you can update the example to something like this:

import * as React from 'react';
import type {
  JSXElement,
  PresenceBadgeStatus,
  ComboboxProps,
} from '@fluentui/react-components';
import {
  Combobox,
  makeStyles,
  Option,
  useId,
  Persona,
} from '@fluentui/react-components';

const useStyles = makeStyles({
  root: {
    // Stack the label above the field with a gap
    display: 'grid',
    justifyItems: 'start',
    gap: '20px',
    maxWidth: '400px',
  },
  field: {
    display: 'grid',
    justifyItems: 'start',
    gap: '2px',
  },
});

const optionData = [
  {
    text: 'Katri Athokas',
    value: 'kathok',
    presence: 'available',
    secondaryText: 'Available',
  },
  {
    text: 'Elvia Atkins',
    value: 'eatkins',
    presence: 'busy',
    secondaryText: 'Busy',
  },
  {
    text: 'Cameron Evans',
    value: 'cevans',
    presence: 'away',
    secondaryText: 'Away',
  },
  {
    text: 'Wanda Howard',
    value: 'whoward',
    presence: 'out-of-office',
    secondaryText: 'Out of office',
  },
];

export const Controlled = (props: Partial<ComboboxProps>): JSXElement => {
  const comboId = useId('combo-controlled');
  const styles = useStyles();
  const [selectedOptions, setSelectedOptions] = React.useState<string[]>([
    'eatkins',
  ]);
  const [value, setValue] = React.useState('Elvia Atkins');
  const [open, setOpen] = React.useState(false);

  const onOptionSelect: (typeof props)['onOptionSelect'] = (ev, data) => {
    setSelectedOptions(data.selectedOptions);
    // setValue(data.optionText ?? '');
    if (data.optionText !== undefined) {
      setValue(data.optionText);
    }
  };

  const onInput = (ev: React.ChangeEvent<HTMLInputElement>) => {
    setValue(ev.target.value);
  };

  // Reset the typed value when the Combobox closes to reflect the selected options
  React.useEffect(() => {
    if (!open) {
      // setValue(selectedOptions.join(', '));
      setValue(
        selectedOptions
          .map((opt) => optionData.find((o) => o.value === opt)?.text ?? opt)
          .join(', ')
      );
    }
  }, [open, selectedOptions]);

  return (
    <div className={styles.root}>
      <div className={styles.field}>
        <label htmlFor={`${comboId}-default`}>
          Schedule a meeting (default selection)
        </label>
        <Combobox
          id={`${comboId}-default`}
          {...props}
          defaultValue="Elvia Atkins"
          defaultSelectedOptions={['eatkins']}
        >
          {optionData.map((opt) => (
            <Option key={opt.value} text={opt.text} value={opt.value}>
              <Persona
                avatar={{ color: 'colorful', 'aria-hidden': true }}
                name={opt.text}
                presence={{
                  status: opt.presence as PresenceBadgeStatus,
                }}
                secondaryText={opt.secondaryText}
              />
            </Option>
          ))}
        </Combobox>
      </div>

      <div className={styles.field}>
        <label htmlFor={`${comboId}-controlled`}>
          Schedule a meeting (controlled selection)
        </label>
        <Combobox
          id={`${comboId}-controlled`}
          {...props}
          value={value}
          selectedOptions={selectedOptions}
          onInput={onInput}
          onOptionSelect={onOptionSelect}
          onOpenChange={(_, data) => setOpen(data.open)}
        >
          {optionData.map((opt) => (
            <Option key={opt.value} text={opt.text} value={opt.value}>
              <Persona
                avatar={{ color: 'colorful', 'aria-hidden': true }}
                name={opt.text}
                presence={{
                  status: opt.presence as PresenceBadgeStatus,
                }}
                secondaryText={opt.secondaryText}
              />
            </Option>
          ))}
        </Combobox>
      </div>
    </div>
  );
};