[Bug]: dropdown value should be empty if the default value is not available in the options

joshua-kurasuite commented 1 day ago

Component

Dropdown

Package version

9.54.13

React version

18.3.1

Environment

System:
    OS: macOS 14.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 129.94 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 127.0.6533.120
    Safari: 17.1
  npmPackages:
    @fluentui/react-components: ^9.54.13 => 9.54.13 
    @fluentui/react-datepicker-compat: ^0.4.50 => 0.4.50 
    @types/react: ^17.0.53 => 17.0.80 
    @types/react-dom: 17.0.18 => 17.0.18 
    react: 18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1

Current Behavior

The dropdown should show empty for the display but instead it shows the value.

Expected Behavior

The dropdown value show show empty if the default value is not an option in the options array

Reproduction

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

Steps to reproduce

Using the dropdown component and the option component create a dropdown with any string array for the option and set the defaultValue of the dropdown to a value that does not exist in the option string.

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?

yes

Validations

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

smhigley commented 1 day ago

@joshua-kurasuite thanks for logging the bug! The value and defaultValue attributes are intended (in part) to allow authors to control how the selected option's text is displayed in the Dropdown button (or Combobox input) separately from how it is displayed in the dropdown list. We intentionally do not prevent authors from using different text in the value than in the option data.

Generally my recommendation would be to set the defaultValue to an empty string if you want the initial/untouched value to be empty, and when that isn't the case, the best practice would be to calculate value or defaultValue based off selectionOptions or defaultSelectedOptions. Is there a use case where you're unable to coordinate setting both the defaultValue and defaultSelectedOptions?

joshua-kurasuite commented 23 hours ago

I created an example that explains the issue i'm facing https://stackblitz.com/edit/xprpzx?file=src%2Fexample.tsx For this example, I have two dropdowns, the first dropdown decides the options for the second dropdown. So, when I choose animals for the first dropdown it gives me a list of animals to choose from the second dropdown and lets say we choose an animal from the second dropdown and then go back to the first dropdown and choose cars, I expect the second dropdown to clear but it still shows the previous selected option even though that ooption is not in the list of option for the second dropdown

microsoft / fluentui