diff --git a/src/modules/Dropdown/Dropdown.d.ts b/src/modules/Dropdown/Dropdown.d.ts index da38661adf..8b89179ebc 100644 --- a/src/modules/Dropdown/Dropdown.d.ts +++ b/src/modules/Dropdown/Dropdown.d.ts @@ -113,7 +113,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 index 339120440d..f2e98fa2d2 100644 --- a/src/modules/Dropdown/Dropdown.js +++ b/src/modules/Dropdown/Dropdown.js @@ -156,7 +156,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 index e0662e365e..1e962c2b79 100644 --- a/test/specs/modules/Dropdown/Dropdown-test.js +++ b/test/specs/modules/Dropdown/Dropdown-test.js @@ -2099,7 +2099,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') @@ -2110,6 +2110,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='' />,