Scope focusable row to the scroll container, refs STCOM-870, ERM-815 (#…

…1603)
folio-org · Aug 24, 2021 · 1c9c515 · 1c9c515
1 parent 6da288f
commit 1c9c515
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@
 * `<SingleSelect>` add new `loading` and `loadingMessage` props to display while loading options. Refs STCOM-858.
 * Applied maxheight to `<DropdownMenu>`. Fixes STCOM-848
 * Fix `<Datepicker>` `inputRef` prop not working. Refs STCOM-869
+* Scope the focusable row to the scroll container. Refs STCOM-870
 
 ## [9.2.0](https://github.com/folio-org/stripes-components/tree/v9.2.0) (2021-06-08)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v9.1.0...v9.2.0)

diff --git a/lib/MultiColumnList/MCLRenderer.js b/lib/MultiColumnList/MCLRenderer.js
@@ -521,7 +521,9 @@ class MCLRenderer extends React.Component {
       }
     } else if (pagingType === 'click' || pagingType === 'prev-next') {
       if (this.focusTargetIndex) {
-        const target = document.querySelector(`[data-row-index="row-${this.focusTargetIndex}"]`);
+        const { current } = this.scrollContainer;
+        const target = current && current.querySelector(`[data-row-index="row-${this.focusTargetIndex}"]`);
+
         if (target) {
           const inner = getNextFocusable(target, true, true);
           const elem = inner || target;
@@ -567,7 +569,7 @@ class MCLRenderer extends React.Component {
       }
 
       if (contentData.length !== 0 &&
-         !virtualize) {
+        !virtualize) {
         this.scrollToItemToView();
       }
     }
@@ -936,7 +938,7 @@ class MCLRenderer extends React.Component {
       onClick,
       onKeyDown,
       'style': defaultStyle,
-      'data-row-inner' : rowIndex,
+      'data-row-inner': rowIndex,
     };
 
     const cellObject = this.renderCells(rowIndex, this.getRowData(rowIndex));
@@ -1117,7 +1119,7 @@ class MCLRenderer extends React.Component {
         shouldPosition={!staticBody}
         rowIndex={endIndex}
       >
-        { ({ position }) => {
+        {({ position }) => {
           return (
             <div data-end-of-list={endIndex} className={css.mclEndOfListContainer} style={{ top: `${position}px` }}>
               <CenteredContainer
@@ -1568,7 +1570,7 @@ class MCLRenderer extends React.Component {
             style={headerStyle}
             id={columnId}
           >
-            { headerInner }
+            {headerInner}
           </div>
         </CellMeasurer>
       );
@@ -1754,7 +1756,7 @@ class MCLRenderer extends React.Component {
           tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
           ref={this.container}
         >
-          { typeof isEmptyMessage === 'string' ? <EmptyMessage>{isEmptyMessage}</EmptyMessage> : isEmptyMessage }
+          {typeof isEmptyMessage === 'string' ? <EmptyMessage>{isEmptyMessage}</EmptyMessage> : isEmptyMessage}
         </div>
       );
     }