{"action":"created","issue":{"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI-React/issues/2296","repository_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI-React","labels_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI-React/issues/2296/labels{/name}","comments_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI-React/issues/2296/comments","events_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI-React/issues/2296/events","html_url":"https://github.com/Semantic-Org/Semantic-UI-React/issues/2296","id":271650751,"number":2296,"title":"Dropdown: when options contain custom elements, setState in onChange leads to mismatch of 'active' and 'selected' option","user":{"login":"jjjkkklll","id":33034679,"avatar_url":"https://avatars1.githubusercontent.com/u/33034679?v=4","gravatar_id":"","url":"https://api.github.com/users/jjjkkklll","html_url":"https://github.com/jjjkkklll","followers_url":"https://api.github.com/users/jjjkkklll/followers","following_url":"https://api.github.com/users/jjjkkklll/following{/other_user}","gists_url":"https://api.github.com/users/jjjkkklll/gists{/gist_id}","starred_url":"https://api.github.com/users/jjjkkklll/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jjjkkklll/subscriptions","organizations_url":"https://api.github.com/users/jjjkkklll/orgs","repos_url":"https://api.github.com/users/jjjkkklll/repos","events_url":"https://api.github.com/users/jjjkkklll/events{/privacy}","received_events_url":"https://api.github.com/users/jjjkkklll/received_events","type":"User","site_admin":false},"labels":[{"id":226591377,"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI-React/labels/bug","name":"bug","color":"fc2929","default":true},{"id":226591380,"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI-React/labels/help%20wanted","name":"help wanted","color":"159818","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2017-11-06T22:56:29Z","updated_at":"2017-12-11T11:00:59Z","closed_at":null,"author_association":"NONE","body":"**Steps**\r\n\r\nI want to setState() within onChange of the Dropdown and have custom elements within the options like so:\r\n```\r\nconst options = [ { value: \"1\",\r\n                    content: <span>a</span> \r\n                              }, ... ];\r\n```\r\n\r\n**Expected Result**\r\n1) The selected option should be active and selected\r\n\r\n2) The state should be set and the dropdown should change its value. The content  of the option `<span>a</span>` should appear in the dropdown.\r\n\r\n**Actual Result**\r\n\r\n1)  The state is set as expected. The selected option is set to active, the previously selected option is kept as selected.\r\n=> Selected and active do not match the same option anymore\r\n\r\n2) The content does not appear in the dropdown\r\n\r\nIf `text` is used instead of `content`\r\n1) The selected option is set to active, the previously selected option is kept as selected.\r\n=> Selected and active do not match the same option anymore\r\n\r\n2) The content does appear in the dropdown\r\n\r\n**Questions:**\r\nWhat should I use, `text` or `content` for this case?\r\nHow to solve the mismatch? \r\n\r\n**Version**\r\n\r\n0.76.0\r\n\r\n**Showcase**\r\nhttps://codesandbox.io/s/pp0w7wrn7q\r\n\r\n**Partially solved here:**\r\nhttps://github.com/Semantic-Org/Semantic-UI-React/pull/2252\r\n"},"comment":{"url":"https://api.github.com/repos/Semantic-Org/Semantic-UI-React/issues/comments/350691718","html_url":"https://github.com/Semantic-Org/Semantic-UI-React/issues/2296#issuecomment-350691718","issue_url":"https://api.github.com/repos/Semantic-Org/Semantic-UI-React/issues/2296","id":350691718,"user":{"login":"hudovisk","id":5161722,"avatar_url":"https://avatars2.githubusercontent.com/u/5161722?v=4","gravatar_id":"","url":"https://api.github.com/users/hudovisk","html_url":"https://github.com/hudovisk","followers_url":"https://api.github.com/users/hudovisk/followers","following_url":"https://api.github.com/users/hudovisk/following{/other_user}","gists_url":"https://api.github.com/users/hudovisk/gists{/gist_id}","starred_url":"https://api.github.com/users/hudovisk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hudovisk/subscriptions","organizations_url":"https://api.github.com/users/hudovisk/orgs","repos_url":"https://api.github.com/users/hudovisk/repos","events_url":"https://api.github.com/users/hudovisk/events{/privacy}","received_events_url":"https://api.github.com/users/hudovisk/received_events","type":"User","site_admin":false},"created_at":"2017-12-11T11:00:59Z","updated_at":"2017-12-11T11:00:59Z","author_association":"NONE","body":"It seems that the issue is not related to text not being a string. I am having the same problem.\r\n\r\nDid some research and it looks like the state.selectedIndex is getting lost. The method [setSelectedIndex](https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js#L919) is called 3 times during an item click. The first from handleItemClick, the second and the third from componentWillReceiveProps. The problem is with the third call, it receives the last value instead the of the new one like the other calls.\r\n\r\nNot sure why componentWillReceiveProps is being called twice and with wrong props.\r\n\r\nComponent usage: \r\n```javascript\r\n<Form.Dropdown\r\n                    label=\"Cor\"\r\n                    name=\"color\"\r\n                    onChange={this.onChange}\r\n                    value={data.color}\r\n                    selection\r\n                    width={2}\r\n                    compact\r\n                    options={COLORS.map(c => ({\r\n                        key: c.color,\r\n                        value: c.color,\r\n                        text: c.color\r\n                    }))}\r\n                />\r\n```"}}
{"actor":{"display_login":"hudovisk"}}