diff --git a/lib/src/Dropdown/Dropdown.test.tsx b/lib/src/Dropdown/Dropdown.test.tsx
index dbab47f87..3f677ba46 100644
--- a/lib/src/Dropdown/Dropdown.test.tsx
+++ b/lib/src/Dropdown/Dropdown.test.tsx
@@ -181,6 +181,66 @@ describe("Component: Dropdown", () => {
expect(container.querySelector("select").multiple).toBe(true);
});
+ it("Should render custom static label", () => {
+ const hardcodedLabel: string = "Always show this text";
+ act(() => {
+ render(
+
+ {testOptions}
+ ,
+ container
+ );
+ });
+
+ expect(container.querySelector(".rc.custom-dropdown > .dropdown > .btn.dropdown-toggle > span").textContent).toBe(hardcodedLabel);
+ });
+
+ it("Should render custom label for selected element", () => {
+ const customLabels: { [k: string]: string } = {
+ 1: "One",
+ 2: "Two",
+ 3: "Three",
+ };
+
+ const getLabel = (value: string) => {
+ return customLabels[value];
+ };
+
+ act(() => {
+ render(
+
+ {testOptions}
+ ,
+ container
+ );
+ });
+
+ expect(container.querySelector(".rc.custom-dropdown > .dropdown > .btn.dropdown-toggle > span").textContent).toBe(customLabels["3"]);
+ });
+
+ it("Should render custom label and separator for selected elements", () => {
+ const customLabels: { [k: string]: string } = {
+ 1: "One",
+ 2: "Two",
+ 3: "Three",
+ };
+
+ const getLabel = (value: string[]) => {
+ return value.map((e) => customLabels[e]).join(" + ");
+ };
+
+ act(() => {
+ render(
+
+ {testOptions}
+ ,
+ container
+ );
+ });
+
+ expect(container.querySelector(".rc.custom-dropdown > .dropdown > .btn.dropdown-toggle > span").textContent).toBe("One + Two");
+ });
+
it("Should render native only when used in a mobile device", () => {
const userAgent: string = window.navigator.userAgent;
const onChange: jest.Mock = jest.fn();
diff --git a/lib/src/Dropdown/Dropdown.tsx b/lib/src/Dropdown/Dropdown.tsx
index 0e3fbf89d..e242794b5 100644
--- a/lib/src/Dropdown/Dropdown.tsx
+++ b/lib/src/Dropdown/Dropdown.tsx
@@ -42,11 +42,13 @@ export type DropdownProps = Omit & {
searchable?: boolean;
/** Allows clearing the dropdown with a clear button */
clearable?: boolean;
+ /** Allows setting custom label to be displayed for selected item */
+ selectedLabel?: string | ((value: string | string[]) => string | string[]);
/** Custom texts to be dispalyed in different parts of the dropdown */
text?: DropdownText;
};
-export const Dropdown: React.FC = React.forwardRef(({ wrapperProps = {}, text = {}, onMultipleChange, searchable, clearable, ...props }: DropdownProps, ref) => {
+export const Dropdown: React.FC = React.forwardRef(({ wrapperProps = {}, text = {}, onMultipleChange, searchable, clearable, selectedLabel, ...props }: DropdownProps, ref) => {
const [toggleId] = React.useState(randomId("ddt-"));
const [selectAllId] = React.useState(randomId("sa-"));
const [show, setShow] = React.useState(false);
@@ -210,8 +212,15 @@ export const Dropdown: React.FC = React.forwardRef(({ wrapperProp
}, [show]);
React.useEffect(() => {
- !isMobile && setLabel((Array.isArray(props.value) ? props.value.join(", ") : props.value) || props.placeholder);
- }, [props.value, props.placeholder]);
+ if (selectedLabel && typeof selectedLabel === "string") {
+ !isMobile && setLabel(selectedLabel || props.placeholder);
+ } else if (selectedLabel && typeof selectedLabel === "function") {
+ const newLabel: string | string[] = selectedLabel(props.value);
+ !isMobile && setLabel((Array.isArray(newLabel) ? newLabel.join(", ") : newLabel) || props.placeholder);
+ } else {
+ !isMobile && setLabel((Array.isArray(props.value) ? props.value.join(", ") : props.value) || props.placeholder);
+ }
+ }, [props.value, props.placeholder, selectedLabel]);
return (