Merge pull request #631 from faichuk/dropdown-toggle-event

feat(DropDownGroup): add onDropDownToggle callback
ticketmaster · Dec 11, 2019 · 8d2ef0b · 8d2ef0b
2 parents 50e9cc2 + e439d61
commit 8d2ef0b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 11 deletions.
diff --git a/catalog/pages/inputs/index.md b/catalog/pages/inputs/index.md
@@ -473,6 +473,10 @@ rows:
     Type: boolean
     Default: 'false'
     Notes: Defines if width is 100% of container
+  - Prop: onDropDownToggle
+    Type: function
+    Default: 'null'
+    Notes: Callback invoked when dropdown open/hide event fired
 ```
 
 ## Drop Down Option

diff --git a/src/components/Input/DropDown/DropDownGroup.js b/src/components/Input/DropDown/DropDownGroup.js
@@ -108,11 +108,18 @@ class DropDownGroup extends React.Component {
   };
 
   toggleDropdown = () => {
-    if (this.state.isOpen) {
+    const { onDropDownToggle } = this.props;
+    const { isOpen } = this.state;
+
+    if (isOpen) {
       this.closeDropdown();
     } else {
       this.openDropdown();
     }
+
+    if (onDropDownToggle) {
+      onDropDownToggle(!isOpen);
+    }
   };
 
   stopInteraction = e => {
@@ -218,7 +225,7 @@ class DropDownGroup extends React.Component {
                       className={classNames(props.className, {
                         "dropdown--open-upward": hasOpenUpwardClass,
                         "dropdown--disabled": disabled,
-                        "full-width": fullWidth,
+                        "full-width": fullWidth
                       })}
                       tabIndex={disabled ? -1 : 0}
                       aria-haspopup="listbox"
@@ -228,13 +235,16 @@ class DropDownGroup extends React.Component {
                     >
                       <StyledGroup
                         {...onClickListener}
-                        className={classNames(`dropdown__label dropdown--${size}`, {
-                          "dropdown--active": isOpen,
-                          "dropdown--border": isBorderAround,
-                          "dropdown--no-border": !isBorderAround,
-                          "dropdown__label--disabled": disabled,
-                          "full-width": fullWidth
-                        })}
+                        className={classNames(
+                          `dropdown__label dropdown--${size}`,
+                          {
+                            "dropdown--active": isOpen,
+                            "dropdown--border": isBorderAround,
+                            "dropdown--no-border": !isBorderAround,
+                            "dropdown__label--disabled": disabled,
+                            "full-width": fullWidth
+                          }
+                        )}
                       >
                         {/* HiddenLabel is required for correct screen readers 
                         readings when an option is selected */}
@@ -246,7 +256,8 @@ class DropDownGroup extends React.Component {
                             "dropdown__text--disabled": disabled
                           })}
                         >
-                          {icon}{this.displayLabel(selected)}
+                          {icon}
+                          {this.displayLabel(selected)}
                         </StyledSelectedText>
 
                         {chevronVisible && (
@@ -313,7 +324,8 @@ DropDownGroup.propTypes = {
   fullWidth: PropTypes.bool,
   shouldOpenDownward: PropTypes.bool,
   icon: PropTypes.node,
-  chevronVisible: PropTypes.bool
+  chevronVisible: PropTypes.bool,
+  onDropDownToggle: PropTypes.func
 };
 
 DropDownGroup.defaultProps = {
@@ -332,6 +344,7 @@ DropDownGroup.defaultProps = {
   icon: null,
   chevronVisible: true,
   fullWidth: false,
+  onDropDownToggle: null
 };
 
 export default DropDownGroup;
diff --git a/src/components/Input/__tests__/DropDownGroup.spec.js b/src/components/Input/__tests__/DropDownGroup.spec.js
@@ -445,6 +445,17 @@ describe("DropDownGroup", () => {
 
     expect(chevron).toBe(null);
   });
+
+  it("should fire onDropDownToggle if its passed", () => {
+    const onDropDownToggleEvent = jest.fn();
+    const { container } = renderTestComponentOne({
+      onDropDownToggle: onDropDownToggleEvent
+    });
+    const labelTag = container.getElementsByTagName("LABEL")[0];
+
+    Simulate.click(labelTag);
+    expect(onDropDownToggleEvent).toBeCalled();
+  });
 });
 
 describe("DropDownOption", () => {