Fluentui: Event.target.id for Dropdown onChange callback is inconsistent

[pviotti]

Bug Report

• __Package version(s)__: 6.92
• __Browser and OS versions__: Chrome, Firefox

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Normal

Describe the issue:

I have a Dropdown component and a handleChange(event, value) callback associated to the onChange event. I expect to be able to retrieve the id of the Dropdown from event.target.id in the callback, but its value changes as the selected item changes, and it's not predictable across browsers.

 <Dropdown
  id="myId"
  placeHolder="Placeholder"
  label="My label"
  onChange={this.handleChange}
  options={myOptions}
  />

[...]

handleChange(event, value) {
  /* NB: event.target.id of events fired by a Dropdown component
  * can be the id of the Dropdown component, or the 
  * id of one of the button tags composing the Dropdown, 
  * which is usually $Componentid-list$num */
  const name = event.target.id.indexOf("-list") !== -1 ? 
      event.target.id.split("-")[0] : event.target.id;

  console.log("CHANGED: " + name + ' - ', value.text);
  this.setState({
      [name]: value.text
  });
}

Actual behavior:

In Firefox:
event.target.id can be any of these: { myId, myId-list1, myId-list2, myId-list3...}

In Chrome:
event.target.id can be any of these: { "" (empty string), myId-list1, myId-list2, myId-list3...}

Expected behavior:

event.target.id should be "myId" in every browser

Known workaround

See https://github.com/OfficeDev/office-ui-fabric-react/issues/54#issuecomment-391418661

related issue: https://github.com/OfficeDev/office-ui-fabric-react/issues/5744

[cliffkoh]

Codepen repro: https://codepen.io/cliffkoh-the-styleful/pen/LgMoPR?editors=0011

[micahgodbolt]

@cliffkoh see that you are listed as the owner in our onenote.

[ThreadPitt]

Hi, would be great if this was fixed. Thanks!

[dzearing]

I think I have a fix for this, testing.

[msft-github-bot]

:tada:This issue was addressed in #8538, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site