Skip to content

Commit 6ec974f

Browse files
committed
fix(Dropdown): Fix missing rendering of icons in selection mode
Closes Semantic-Org#4346
1 parent 9dd0596 commit 6ec974f

File tree

3 files changed

+30
-2
lines changed

3 files changed

+30
-2
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import { Dropdown } from 'semantic-ui-react'
3+
4+
const packageManagersOptions = [
5+
{ key: 'gem', value: 'gem', icon: 'gem', text: 'RubyGems' },
6+
{ key: 'npm', value: 'npm', icon: 'npm', text: 'NPM' },
7+
{ key: 'docker', value: 'docker', icon: 'docker', text: 'Docker' },
8+
]
9+
10+
const DropdownExampleSearchSelection = () => (
11+
<Dropdown
12+
placeholder='Select Package Manager'
13+
fluid
14+
search
15+
selection
16+
options={packageManagersOptions}
17+
/>
18+
)
19+
20+
export default DropdownExampleSearchSelection

docs/src/examples/modules/Dropdown/Types/index.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,14 @@ const DropdownTypesExamples = () => (
2626
description='A selection dropdown can allow a user to search through a large list of choices.'
2727
examplePath='modules/Dropdown/Types/DropdownExampleSearchSelection'
2828
/>
29-
<ComponentExample examplePath='modules/Dropdown/Types/DropdownExampleSearchSelectionTwo' />
29+
<ComponentExample
30+
title='Search Selection with Text'
31+
examplePath='modules/Dropdown/Types/DropdownExampleSearchSelectionTwo'
32+
/>
33+
<ComponentExample
34+
title='Search Selection with Icon'
35+
examplePath='modules/Dropdown/Types/DropdownExampleSearchSelectionIcon'
36+
/>
3037
{/* Possibly add state selection example. */}
3138
<ComponentExample
3239
title='Multiple Selection'

src/modules/Dropdown/Dropdown.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const getKeyAndValues = (options) =>
3939
options ? options.map((option) => _.pick(option, ['key', 'value'])) : options
4040

4141
function renderItemContent(item) {
42-
const { flag, image, text } = item
42+
const { flag, image, icon, text } = item
4343

4444
// TODO: remove this in v3
4545
// This maintains compatibility with Shorthand API in v1 as this might be called in "Label.create()"
@@ -52,6 +52,7 @@ function renderItemContent(item) {
5252
<>
5353
{Flag.create(flag)}
5454
{Image.create(image)}
55+
{Icon.create(icon)}
5556

5657
{text}
5758
</>

0 commit comments

Comments
 (0)