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

Closes Semantic-Org#4346
Fox32 · Mar 24, 2022 · ab1ef0a · ab1ef0a
1 parent 9dd0596
commit ab1ef0a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchSelectionIcon.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchSelectionIcon.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Dropdown } from 'semantic-ui-react'
+
+const packageManagersOptions = [
+  { key: 'gem', value: 'gem', icon: 'gem', text: 'RubyGems' },
+  { key: 'npm', value: 'npm', icon: 'npm', text: 'NPM' },
+  { key: 'docker', value: 'docker', icon: 'docker', text: 'Docker' },
+]
+
+const DropdownExampleSearchSelection = () => (
+  <Dropdown
+    placeholder='Select Package Manager'
+    fluid
+    search
+    selection
+    options={packageManagersOptions}
+  />
+)
+
+export default DropdownExampleSearchSelection
diff --git a/docs/src/examples/modules/Dropdown/Types/index.js b/docs/src/examples/modules/Dropdown/Types/index.js
@@ -26,7 +26,14 @@ const DropdownTypesExamples = () => (
       description='A selection dropdown can allow a user to search through a large list of choices.'
       examplePath='modules/Dropdown/Types/DropdownExampleSearchSelection'
     />
-    <ComponentExample examplePath='modules/Dropdown/Types/DropdownExampleSearchSelectionTwo' />
+    <ComponentExample
+      title='Search Selection with Text'
+      examplePath='modules/Dropdown/Types/DropdownExampleSearchSelectionTwo'
+    />
+    <ComponentExample
+      title='Search Selection with Icon'
+      examplePath='modules/Dropdown/Types/DropdownExampleSearchSelectionIcon'
+    />
     {/* Possibly add state selection example. */}
     <ComponentExample
       title='Multiple Selection'

diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -39,7 +39,7 @@ const getKeyAndValues = (options) =>
   options ? options.map((option) => _.pick(option, ['key', 'value'])) : options
 
 function renderItemContent(item) {
-  const { flag, image, text } = item
+  const { flag, image, icon, text } = item
 
   // TODO: remove this in v3
   // This maintains compatibility with Shorthand API in v1 as this might be called in "Label.create()"
@@ -52,6 +52,7 @@ function renderItemContent(item) {
       <>
         {Flag.create(flag)}
         {Image.create(image)}
+        {Icon.create(icon)}
 
         {text}
       </>