Semantic-ui-react: Form.Select - placeholder disappearing

[rafalradomski]

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

[levithomason]

Hm, could you provide an example of the component with the props you want and the example rendered output you are expecting? I'm not quite sure I understand.

[rafalradomski]

Hi @levithomason I looking for something like this: https://jsfiddle.net/xu4fv5n0/2/ where I can cancel current value, and I can see again default value = Placeholder = null

I don't know why when you choose one option, there is no way back...

[layershifter]

You should use controlled components, I've made a codepen that shows how to do this. SO is better place for questions.

[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...

[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.