Dropdown: Empty string should be valid value

[makarov-roman]

Steps

There is component

<Dropdown selection options={[{value: '', text: "someText"}] />

Expected Result

<Dropdown selection options={[{value: '', text: "someText"}] value="" />

wil show text "someText"

Actual Result

Empty field displayed

Version

0.68.5

Testcase

Example, and html behaviour to compare (which I expected)

[saitonakamura]

I think you should check whether such behaviour is just repeating original Semantic UI behaviour or not

[makarov-roman]

I'd updated testcase. Looks like we have 3 different types of behaviours :)

[kaikun213]

Yes, when additions allowed we can also not remove the last letter without replacing it. Guess its a follow up from it.

[odiseo42]

I'm also having issues with this. Is there any reason for what empty string cannot be a value?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[franck-boucher]

Still having the problème. Does someone have a workaround ?

[brianespinosa]

@odiseo42 Maybe you could take a shot at opening a PR for this? 🙏 😉

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[brianespinosa]

@odiseo42 what happened?! 😢

[Cat61]

Please fix this 🙏 It is a problem for me too.

[alanwf]

But still alive. Please fix.

[crowdozer]

still no support is a shame. I made a hacky workaround by creating a component that acts as an in-between for the options you give the dropdown, and the dropdown the user actually interacts with.

You can try this, it should work with no configuration in "standard" use (it does for me at least) but I can't make any guarentees for how anyone else will use it. https://codepen.io/anon/pen/ajPwLg

It sucks that it's as expensive as it is to remap falsy values and then fetch them again but I couldn't think of an easier way to do it without working on an actual fix (which I wouldn't know where to begin on).

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[tad-lispy]

Hi! Thanks for all your hard work on Semantic UI and it's React bindings. I'm using it for the first time and it seems like a very nice framework. Let me get to the point.

Am I right in thinking that underlying issue is that no selection state is represented as the empty string? For example when I have a clearable dropdown with onChange callback and I clear it, the value passed to onChange is "". I think it's not very semantic (pun intended). I would say that semantic way of representing "no value" in JS is null or in case of multi-select an empty array.

If you agree with my thinking above and we could change the representation of "no selection", this should clear the path to allow empty strings as valid values. This would be a breaking change, so before I attempt to prepare a PR I'd like to get some feedback on the idea.

[DanielReid]

I think @tad-lispy is correct - the current behaviour of setting the value of a dropdown to empty string instead of null or undefined is semantically odd, and it is interfering with some database filter UI I'm making, where grouping by an empty string value should be possible. So I would really welcome this proposed change.

[sergeushenecz]

Hi everyone. Will have some workaround for that case?

[Danielg212]

@sergeushenecz I did a workaround by mapping "empty" value to a null state as following:

    const [state, setState] = useState({selected:null});
    this.userTypes = [
      {key: 'empty', text: 'Empty', value: '<empty>'},
      {key: 'admin', text: 'Admin', value: 'admin'},
      {key: 'user', text: 'User', value: 'user'},
    ];
     <Form.Field>
          <label>User</label>
              <Dropdown
                   key="selectedUseType"
                   options={this.userTypes}
                   onChange={(e) => this.setState({ selected: e.target.value || null })
                   value={this.state.selected || '<empty>'}
                   name="selectedUserType"
                   className="user-type"
                   selection
               />
    </Form.Field>