Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration
https://react.semantic-ui.com
MIT License
13.2k stars 4.04k forks source link

Dropdown values are not displayed when Dropdown Items are JSX #4403

Open replaysMike opened 1 year ago

replaysMike commented 1 year ago

Bug Report

I see a merge many years back for this issue #1380 but it is still an issue for me. Was it rolled back at some point? If using JSX templating for the Dropdown items it doesn't seem to indicate values at all for multiple selection. Kinda tricky to handle onChange as well but at least that's addressable.

Steps

<Dropdown
  className="selection"
  placeholder="Select options..."
  name="myDropdown"
  search
  fluid
  multiple
  value={data.myDropdown || []}
>
  <Dropdown.Menu>
    {options.map((option, key) => (
    <Dropdown.Item key={key} value={option.value} onClick={(e, control) => handleOptionChange(e, control)}>
      <table className="selected">
        <tbody>
          <tr>
            <td><Icon name={option.icon} size='big' /></td>
        <td>
              <div className="text">{option.text}</div>
              <div className="description">{option.description}</div>
            </td>
            </tr>
          </tbody>
        </table>
      </Dropdown.Item>
      ))}
  </Dropdown.Menu>
</Dropdown>

Expected Result

Chosen/existing values should be displayed

Actual Result

No selected values are displayed

Version

2.1.3

Testcase

JSX Dropdown Test Sandbox