Skip to content

Icon for the selected option is not shown in selection Dropdowns #4346

New issue
New issue
Open
#4347
Open
Icon for the selected option is not shown in selection Dropdowns#4346
#4347
@mfen

Description

@mfen
mfen
opened on Mar 22, 2022 · edited by mfen

Bug Report

Steps

  • Create a <Dropdown selection /> with icon set in the options.
  • Select an option (or pass in a controlled selected value).

Expected Result

The icon for the selected option should be displayed to the left of the Dropdown text, similar to how it is shown in the dropdown menu items or how the Flag or Image for a selected option is shown.

Actual Result

No icon is shown for the selected option in the collapsed Dropdown, only the option's text is shown.

Version

2.1.2

Testcase

https://codesandbox.io/s/semantic-ui-react-forked-g2lci9

This is essentially the same issue as #1147, but that issue seems to have been mistakenly closed with #4003. While the original #3980 had included support for Icons alongside Flags and Images, the code for Icon support was omitted in this eventual commit of #4003 (@layershifter).

Activity

welcome

welcome commented on Mar 22, 2022

@welcome
welcomebot
on Mar 22, 2022

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

Fox32
added 2 commits that reference this issue on Mar 24, 2022

fix(Dropdown): Fix missing rendering of icons in selection mode

6ec974f

fix(Dropdown): fix missing rendering of icons in selection mode

ab1ef0a
Fox32
linked a pull request that will close this issue on Mar 24, 2022
Fox32

Fox32 commented on Mar 24, 2022

@Fox32
Fox32
on Mar 24, 2022

Just came along the same issue today, so I created #4347

Fox32

Fox32 commented on Mar 24, 2022

@Fox32
Fox32
on Mar 24, 2022

Btw, there is a possible workaround:

  1. You can extend the option text to include the icon:
        {
          key: 'my-user',
          text: (
            <>
              <Icon name="user" />
              My User
            </>
          ),
          searchText: 'My User',
          value: 'my-user',
        },
  1. However, this breaks search. That's why I added a custom searchText field in the option and included custom search function in the <Dropdown>:
<Dropdown
  options={options}
  search={(options, query) => {
    const re = new RegExp(escapeRegExp(query), 'i');
    return options.filter((opt) => re.test(opt.searchText));
  }}
  …

This is cumbersome, but an option for everyone that can't wait for a fix 😉.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @Fox32@mfen

      Issue actions
        Icon for the selected option is not shown in selection Dropdowns · Issue #4346 · Semantic-Org/Semantic-UI-React