From ca8b634a8e941447f2469d1d50abce3bbc5c7d1b Mon Sep 17 00:00:00 2001
From: Brendan Hennessy <bhennes2@LaunchPadLab-MBP.hsd1.il.comcast.net>
Date: Thu, 11 Nov 2021 20:25:11 -0600
Subject: [PATCH 1/2] Accept selectedOptionsDisplayFormatter prop

---
 docs.md                                     | 1 +
 src/forms/helpers/dropdown-select.js        | 7 +++++--
 src/forms/inputs/dropdown-checkbox-group.js | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/docs.md b/docs.md
index 8c3d8aea..84dc26bc 100644
--- a/docs.md
+++ b/docs.md
@@ -539,6 +539,7 @@ Clicking an unselected checkbox adds its value to this array, and clicking a sel
 -   `input` **[Object][156]** A `redux-forms` [input][157] object
 -   `meta` **[Object][156]** A `redux-forms` [meta][158] object
 -   `options` **[Array][154]** An array of checkbox values (strings or key-value pairs)
+-   `selectedOptionsDisplayFormatter` **[Function][]** A function that receives an array of selected values and returns a string or HTML to render those values
 
 ### Examples
 
diff --git a/src/forms/helpers/dropdown-select.js b/src/forms/helpers/dropdown-select.js
index 8ea65015..54469cfe 100644
--- a/src/forms/helpers/dropdown-select.js
+++ b/src/forms/helpers/dropdown-select.js
@@ -7,12 +7,14 @@ const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   selectedValues: PropTypes.arrayOf(PropTypes.string),
+  selectedOptionsDisplayFormatter: PropTypes.func,
   ...togglePropTypes('expanded'),
 }
 
 const defaultProps = {
   className: '',
   selectedValues: [],
+  selectedOptionsDisplayFormatter: getLabel,
 }
 
 // Wraps the `DropdownCheckboxGroup` component
@@ -22,12 +24,13 @@ function DropdownSelect ({
   className,
   expanded, 
   selectedValues, 
-  toggleExpanded, 
+  toggleExpanded,
+  selectedOptionsDisplayFormatter,
 }) {
   return (
     <div className="dropdown-select">
       <div className="select-input" onClick={ toggleExpanded }>
-        <p>{ getLabel(selectedValues) }</p>
+        <p>{selectedOptionsDisplayFormatter(selectedValues)}</p>
       </div>
       <div 
         className={ classnames(
diff --git a/src/forms/inputs/dropdown-checkbox-group.js b/src/forms/inputs/dropdown-checkbox-group.js
index 1a0efb8b..b9946a12 100644
--- a/src/forms/inputs/dropdown-checkbox-group.js
+++ b/src/forms/inputs/dropdown-checkbox-group.js
@@ -59,7 +59,7 @@ function DropdownCheckboxGroup (props) {
   return (
     <fieldset>
       <InputLabel { ...{ label, name } } />
-      <DropdownSelect selectedValues={ value } className="checkboxes">
+      <DropdownSelect {...props} selectedValues={ value } className="checkboxes">
         <CheckboxGroup { ...props } label={ false } />
       </DropdownSelect>
     </fieldset>

From a692af74b8a05c2bb270d8b3901434bf0580d7d5 Mon Sep 17 00:00:00 2001
From: Brendan Hennessy <bhennes2@LaunchPadLab-MBP.hsd1.il.comcast.net>
Date: Mon, 15 Nov 2021 20:28:32 -0600
Subject: [PATCH 2/2] Add placeholder test for fn formatter

---
 .../inputs/dropdown-checkbox-group.test.js    | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/test/forms/inputs/dropdown-checkbox-group.test.js b/test/forms/inputs/dropdown-checkbox-group.test.js
index 173f3a4a..df960da0 100644
--- a/test/forms/inputs/dropdown-checkbox-group.test.js
+++ b/test/forms/inputs/dropdown-checkbox-group.test.js
@@ -36,4 +36,27 @@ test('DropdownCheckboxGroup removes value to array when selected option clicked'
   wrapper.find('input').simulate('change')
   const newValue = onChange.mock.calls[0][0]
   expect(newValue).toEqual([])
+})
+
+test('DropdownCheckboxGroup allows custom selected option formatting', () => {
+  const selectedOptionsDisplayFormatter = (values) => {
+    return values.length ? values.join('; ') : 'Empty'
+  }
+  const onChange = jest.fn()
+  const TOGGLED_OPTION = 'TOGGLED_OPTION'
+  const props = {
+    input: {
+      name: 'test',
+      value: [],
+      onChange,
+    },
+    meta: {},
+    options: [TOGGLED_OPTION],
+    selectedOptionsDisplayFormatter,
+  }
+  const wrapper = mount(<DropdownCheckboxGroup { ...props } />)
+  wrapper.find('input').simulate('change')
+  const newValues = onChange.mock.calls[0]
+  const displayOptionsHtml = wrapper.find('.select-input').innerHTML
+  expect(displayOptionsHtml).toEqual(`<p>${selectedOptionsDisplayFormatter(newValues)}</p>`)
 })
\ No newline at end of file