Dropdown: option keys fallback to values incorrectly

Steps

if we define our Dropdown component like this:

const opts = [
  {
    key: 0,
    value: 1,
    text: 'Foo',
  },
  {
    key: 1,
    value: 2,
    text: 'Bar',
  },
]

const MyDropdown = () => <Dropdown selection options={opts} />

Note: this only happens with selection prop true, because only in that case, select is rendered behind the scenes

Expected Result

This should render <select> with two <option>s with keys 0 and 1

Actual Result

This tries to render <select> with two <option>s with keys 1 and 1 because of { option.key || option.value } (see this line of the code https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js#L1074)

I think this line should be rewritten to only fallback to option.value when option.key is either undefined or empty string. All other falsy values are valid keys, react converts them to strings.

Version

last

Testcase

https://codepen.io/notgiorgi/pen/ZKgBob?editors=0010 (you cannot use devtools on codepen)

[notgiorgi]

One approach can be to write a helper function:

function getValidKey(key) {
  switch (key) {
    case null: return 'null'
    case false: return 'false'
    case 0: return '0'

    case undefined:
    case '':
      return false
    default: return key
  }
}

and then

key={getValidKey(option.key) || option.value}

Or we could do

function getValidKey(key, fallback) {
  switch (key) {
    case undefined:
    case '':
      return fallback
    default: return key
  }
}

and then

key={getValidKey(option.key, option.value)}

I can send a PR

[levithomason]

Released in semantic-ui-react@0.68.5.