STCOM-1238 Accordions - apply content z-index in reverse-registration…

… order (#2209)

* accordions - apply content  z-index in reverse-registration order

* clean up unused code

* log changes

CHANGELOG.md

@@ -15,6 +15,7 @@
 * TextLink - underline showing up on nested spans with 'display: inline-flex'. Refs STCOM-1226.
 * Use the default search option instead of an unsupported one in Advanced search. Refs STCOM-1242.
 * Added support for clear icon in `<TextArea>`. Refs STCOM-1240.
+* Bug fix for Accordion content z-index rendering. Refs STCOM-1238.
 * Format aria attributes in `<Icon>`. Refs STCOM-1165.
 
 ## [12.0.0](https://github.com/folio-org/stripes-components/tree/v12.0.0) (2023-10-11)

lib/Accordion/Accordion.js

@@ -9,7 +9,6 @@ import {
 import { DefaultAccordionHeader } from './headers';
 import css from './Accordion.css';
 import { HotKeys } from '../HotKeys';
-import useClickOutside from '../../hooks/useClickOutside';
 import { withAccordionSet } from './AccordionSetContext';
 import omitProps from '../../util/omitProps';
 
@@ -102,8 +101,8 @@ const Accordion = (props) => {
 
   const getRef = useRef(() => toggle.current).current;
   const [isOpen, updateOpen] = useState(open || !closedByDefault);
-  const [focused, updateFocus] = useState(false);
-  const [registered, updateRegistered] = useState(!Boolean(accordionSet));
+  const [registered, updateRegistered] = useState(!accordionSet);
+  const [stackOrder, updateStackOrder] = useState(1);
 
   const uncontrolledToggle = useRef(() => {
     updateOpen(current => !current);
@@ -126,22 +125,21 @@ const Accordion = (props) => {
   }, [open]);
 
   useEffect(() => { // eslint-disable-line
+    function registrationCallback(isRegistered) {
+      updateRegistered(isRegistered);
+      if (accordionSet) {
+        updateStackOrder(accordionSet.getStackOrder(trackingId));
+      }
+    }
+
     if (accordionSet) {
-      accordionSet.registerAccordion(getRef, trackingId, closedByDefault, updateRegistered);
+      accordionSet.registerAccordion(getRef, trackingId, closedByDefault, registrationCallback);
       return () => {
         accordionSet.unregisterAccordion(trackingId);
       };
     }
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const handleFocus = () => updateFocus(true);
-
-  // use click outside instead of blur
-  // blur has issues with clicking on scroll bars, where event's target is
-  // the whole document instead of the scrollable content. because of this we can't
-  // use blur to determine whether user clicked inside the accordion component tree
-  useClickOutside(content, (e, isOutside) => updateFocus(!isOutside));
-
   const accordionHeaderProps = Object.assign({}, omitProps(props, ['contentHeight']), {
     contentId,
     toggleRef: (ref) => { toggle.current = ref; },
@@ -168,14 +166,13 @@ const Accordion = (props) => {
       >
         {headerElement}
       </HotKeys>
-      <div className={getWrapClass(isOpen)} style={{ zIndex: focused ? '2' : '1' }}>
+      <div className={getWrapClass(isOpen)} style={{ zIndex: stackOrder }}>
         <div
           role="region"
           className={getContentClass(isOpen)}
           ref={setContentRef}
           id={contentId}
           aria-labelledby={labelId}
-          onFocus={handleFocus}
           style={contentHeight ? { height: contentHeight } : null}
           data-test-accordion-wrapper
         >

lib/Accordion/AccordionSet.js

@@ -99,6 +99,12 @@ class AccordionSet extends React.Component {
     this.state.accordionList[this.state.accordionList.length - 1].getRef().focus();
   }
 
+  getStackOrder = (id) => {
+    const { accordionList } = this.state;
+    const index = accordionList.findIndex(a => a.id === id);
+    return accordionList.length - index;
+  }
+
   registerAccordion = (getRef, id, closedByDefault = false, confirm) => {
     const { initialStatus } = this.props;
 
@@ -187,7 +193,8 @@ class AccordionSet extends React.Component {
                   unregisterAccordion: this.unregisterAccordion,
                   handleToggle: onToggleProp || onToggle,
                   toggleKeyHandlers: this.toggleKeyHandlers,
-                  toggleKeyMap: this.toggleKeyMap
+                  toggleKeyMap: this.toggleKeyMap,
+                  getStackOrder: this.getStackOrder,
                 }
               }}
             >