feat(Dropdown): noResultsMessage prop can be a node (#3177)

Semantic-Org · Nov 30, 2018 · 520accc · 520accc
1 parent 94711d3
commit 520accc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/src/modules/Dropdown/Dropdown.d.ts b/src/modules/Dropdown/Dropdown.d.ts
@@ -116,7 +116,7 @@ export interface StrictDropdownProps {
   multiple?: boolean
 
   /** Message to display when there are no results. */
-  noResultsMessage?: string
+  noResultsMessage?: React.ReactNode
 
   /**
    * Called when a user adds a new item. Use this to update the options list.

diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -159,7 +159,7 @@ export default class Dropdown extends Component {
     multiple: PropTypes.bool,
 
     /** Message to display when there are no results. */
-    noResultsMessage: PropTypes.string,
+    noResultsMessage: PropTypes.node,
 
     /**
      * Called when a user adds a new item. Use this to update the options list.

diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -2153,7 +2153,7 @@ describe('Dropdown', () => {
       wrapper.find('.message').should.have.text('No results found.')
     })
 
-    it('uses custom noResultsMessage', () => {
+    it('uses custom string for noResultsMessage', () => {
       const search = wrapperMount(
         <Dropdown options={options} selection search noResultsMessage='Something custom' />,
       ).find('input.search')
@@ -2164,6 +2164,22 @@ describe('Dropdown', () => {
       wrapper.find('.message').should.have.text('Something custom')
     })
 
+    it('uses custom component for noResultsMessage', () => {
+      const search = wrapperMount(
+        <Dropdown
+          options={options}
+          selection
+          search
+          noResultsMessage={<span>Something custom</span>}
+        />,
+      ).find('input.search')
+
+      // search for something we know will not exist
+      search.simulate('change', { target: { value: '_________________' } })
+
+      wrapper.find('.message').should.contain.descendants('span')
+    })
+
     it('uses no noResultsMessage', () => {
       const search = wrapperMount(
         <Dropdown options={options} selection search noResultsMessage='' />,