feat: added prop to Accordion to conditionally disallow focusing on i…

…nitialActive
momentum-design · Mar 21, 2022 · 31303f3 · 31303f3
1 parent e2cfab8
commit 31303f3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 28 deletions.
diff --git a/react/src/lib/Accordion/index.js b/react/src/lib/Accordion/index.js
@@ -8,11 +8,12 @@ class Accordion extends React.Component {
 
   state = {
     activeIndices: this.props.initialActive || [],
+    focusIndicies: this.props.initialActiveFocus,
     focus: false,
-  }
+  };
 
-  componentDidMount () {
-    if(!this.verifyChildren()) {
+  componentDidMount() {
+    if (!this.verifyChildren()) {
       throw new Error('Accordion should contain one or more AccordionGroup as children.');
     }
 
@@ -28,28 +29,27 @@ class Accordion extends React.Component {
     }, true);
 
     return children && childrenArr.length && status;
-  }
+  };
 
   determineInitialFocus = () => {
-    const nonDisabledIndex = React.Children.toArray(this.props.children).reduceRight((agg, child, idx) => {
-      return !child.props.disabled
-        ? idx
-        : agg;
-    }, null);
+    const nonDisabledIndex = React.Children.toArray(this.props.children).reduceRight(
+      (agg, child, idx) => {
+        return !child.props.disabled ? idx : agg;
+      },
+      null
+    );
 
     this.setFocus(nonDisabledIndex);
-  }
+  };
 
   handleClick = index => {
-    return this.props.multipleVisible
-      ? this.setMultiple(index)
-      : this.setSelected(index);
-  }
+    return this.props.multipleVisible ? this.setMultiple(index) : this.setSelected(index);
+  };
 
   setMultiple = index => {
     let newValues;
     const { onSelect } = this.props;
-    const { activeIndices } = this.state;
+    const { activeIndices, focusIndicies } = this.state;
     const isActive = activeIndices.includes(index);
 
     if (isActive) {
@@ -58,19 +58,21 @@ class Accordion extends React.Component {
       newValues = activeIndices.concat(index);
     }
 
-    this.setFocus(index);
+    if (focusIndicies) {
+      this.setFocus(index);
+    }
+
     this.setState(() => {
       onSelect && onSelect(newValues);
       return { activeIndices: newValues };
     });
-  }
+  };
 
   setSelected = index => {
     const { activeIndices } = this.state;
     const { children, onSelect } = this.props;
     // Don't do anything if index is the same or outside of the bounds
-    if (activeIndices.includes(index) || index < 0 || index >= children.length)
-      return;
+    if (activeIndices.includes(index) || index < 0 || index >= children.length) return;
 
     // Keep reference to last index for event handler
     const last = activeIndices[0];
@@ -80,10 +82,10 @@ class Accordion extends React.Component {
     this.setFocus(index);
 
     onSelect && onSelect(index, last);
-  }
+  };
 
   handleKeyPress = (e, idx, length, disabled) => {
-    if(disabled) {
+    if (disabled) {
       e.preventDefault();
       e.stopPropagation();
       return;
@@ -178,19 +180,14 @@ class Accordion extends React.Component {
       return React.cloneElement(child, {
         isExpanded: !child.props.disabled && activeIndices.includes(idx),
         onClick: () => this.handleClick(idx),
-        onKeyDown: e => this.handleKeyPress(e, idx, children.length - 1 , child.props.disabled),
+        onKeyDown: e => this.handleKeyPress(e, idx, children.length - 1, child.props.disabled),
         focus: this.state.focus === idx,
         showSeparator,
       });
     });
 
     return (
-      <div
-        className={
-          'md-accordion' +
-          `${(className && ` ${className}`) || ''}`
-        }
-      >
+      <div className={'md-accordion' + `${(className && ` ${className}`) || ''}`}>
         {setAccordionGroups}
       </div>
     );
@@ -207,6 +204,8 @@ Accordion.propTypes = {
   /** @prop An array of indexes that are preselected | [] */
   initialActive: PropTypes.array,
   /** @prop Optional css class string | '' */
+  initialActiveFocus: PropTypes.bool,
+  /** @prop Set to disallow focus upon opening Accordion on load | true */
   className: PropTypes.string,
   /** @prop Optional underline under Accordion menu item | false  */
   showSeparator: PropTypes.bool,
@@ -217,6 +216,7 @@ Accordion.defaultProps = {
   multipleVisible: false,
   onSelect: null,
   initialActive: [],
+  initialActiveFocus: true,
   className: '',
   showSeparator: false,
 };

diff --git a/react/src/lib/Accordion/tests/__snapshots__/index.spec.js.snap b/react/src/lib/Accordion/tests/__snapshots__/index.spec.js.snap
@@ -6,6 +6,7 @@ ShallowWrapper {
   Symbol(enzyme.__unrendered__): <Accordion
     className=""
     initialActive={Array []}
+    initialActiveFocus={true}
     multipleVisible={false}
     onSelect={null}
     showSeparator={false}