Form.Select - placeholder disappearing

I want select list where I can select null value

When I choose item from the list, placeholder disappearing

                    <Form.Select
                        name="parentId"
                        value={this.state.parentId}
                        options={options}
                        onChange={this.handleChange.bind(this)}
                        placeholder='Parent Id'
                    />

When I trying add extra item with empty value, it’s not set as default.

            options.push({
                'key': '1',
                'text': 'Parent Id',
                'value': ''
            })

How to make placeholder presist or set empty value as default?

Version

0.71.1

[layershifter]

but your example doesn’t work

Yep, I’ve forgot to add onChange handler.

By the way, why I need separate button to clear select?

How you want to reset value in another way? 🙃 Something should change the state.

I’ve copied behaviour to icon on Dropdown, so it resets value as in your example. However, it needs more styling and more logic because it’s not a SUI feature. See codepen.

If you preventing applying null value

handleReset sets value to null. '' don’t accepted as value, there is already issue about this #1748. placeholder behaviour is also was discussed there #1299. Contributions are welcome.

[rafalradomski]

@layershifter thx, but your example doesn’t work, when you select option, reset and try select again it doesn’t work

By the way, why I need separate button to clear select? it’s bad UI, normal select can handle both cases

If you preventing applying null value, you should provide some solution to easily reset select list with out some extra UI elements…