Make the dropdown button always show a placeholder text - reactjs

Question

I would like to realize a textfield and a dropdown. When users select an option in the dropdown, the selection will be written to the textfield. And users can write whatever they want in the textfield; the dropdown list is supposed to give users some possible examples/ideas.
It's more or less like a combobox, but I find combobox is always one line (please correct me if I'm wrong). I would expect the textarea to be big and have several lines.
I have written the following code, one thing I would like to improve is that, after selecting an option, I would like the dropdown button to always show Examples of sentences rather than the selected option.
Does anyone know how to achieve this?
I'm open to other third-party components that could realize similar logics.
StackBlitz: https://stackblitz.com/edit/react-ts-yrhmfn?file=App.tsx,index.tsx
import {
FluentProvider,
webLightTheme,
} from '#fluentui/react-components';
import {
Dropdown,
Option
} from '#fluentui/react-components/unstable';
import { TextField } from '#fluentui/react';
import * as React from 'react';
export default class Grouped extends React.Component<{}, { value: any }> {
constructor(props) {
super(props);
this.state = { value: '' };
}
land = ['A long sentence', 'Another long sentence', 'Another another long sentence'];
render() {
return (
<div>
<FluentProvider
className="fluent-provider"
style={{ display: 'flex' }}
theme={webLightTheme}
>
<Dropdown
placeholder="Examples of sentences"
onOptionSelect={(e, data) => {
if (data.optionText !== undefined)
this.setState({ value: data.optionText });
}}
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
</FluentProvider>
<br/>
<TextField
label="Write a sentence:"
value={this.state.value}
multiline
rows={3}
autoAdjustHeight
resizable={false}
/>
</div>
);
}
}

Answer 1

Well, I can solve this but it's a bit of a hack :) My professional suggestion is to consider a different third party library. I looked at the FluentUI and there doesn't seem to be a way to control the currently selected value.
If there were, you could simply set the currently selected value to undefined. Barring that, here's some code that achieve what you're asking for:
{this.state.visible && (
<Dropdown
placeholder="Select an animal"
onOptionSelect={(e, data) => {
if (data.optionText !== undefined) {
this.setState({ value: data.optionText, visible: false });
setTimeout(() => {
this.setState({ value: data.optionText, visible: true });
}, 0);
}
}}
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
)}
What this code does is essentially "unload" the dropdown after a selection is made and then reload it one tick later, which resets its internal state. It's definitely a "hacky" solution, but it gets the job done.

Answer 2

The dropdown uses slots, so actually it's really easy to achieve. You can simply overwrite the props of the underlying button to display always the same text:
<Dropdown
button={{children: "Placeholder"}}
>
<Option>A</Option>
<Option>B</Option>
<Option>C</Option>
<Option>D</Option>
</Dropdown>