[Labs / MultiSelect] Allow tags to be arbitrary elements (#1465)

* Fix and unit test * Update multiSelect.tsx * Update multiSelectTests.tsx
palantir · Aug 22, 2017 · 7fd70b3 · 7fd70b3
1 parent 06d9cb0
commit 7fd70b3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/labs/src/components/select/multiSelect.tsx b/packages/labs/src/components/select/multiSelect.tsx
@@ -62,8 +62,8 @@ export interface IMultiSelectProps<T> extends IListItemsProps<T> {
     /** Props to spread to `TagInput`. */
     tagInputProps?: Partial<ITagInputProps> & object;
 
-    /** Custom renderer to transform an item into a string for tags. */
-    tagRenderer: (item: T) => string;
+    /** Custom renderer to transform an item into tag content. */
+    tagRenderer: (item: T) => React.ReactNode;
 }
 
 export interface IMultiSelectState<T> {

diff --git a/packages/labs/test/multiSelectTests.tsx b/packages/labs/test/multiSelectTests.tsx
@@ -5,7 +5,7 @@
  * and https://github.com/palantir/blueprint/blob/master/PATENTS
  */
 
-import { Classes, MenuItem } from "@blueprintjs/core";
+import { Classes, MenuItem, Tag } from "@blueprintjs/core";
 import { assert } from "chai";
 import * as classNames from "classnames";
 import { mount } from "enzyme";
@@ -44,6 +44,11 @@ describe("<MultiSelect>", () => {
         assert.equal((input.getDOMNode() as HTMLInputElement).placeholder, placeholder);
     });
 
+    it("tagRenderer can return JSX", () => {
+        const wrapper = multiselect({ tagRenderer: (film) => <strong>{film.title}</strong>, selectedItems: [TOP_100_FILMS[0]] });
+        assert.equal(wrapper.find(Tag).find("strong").length, 1);
+    });
+
     it("clicking item invokes onSelectItem with placeholder", () => {
         const placeholder = "look here";