Merge pull request #227 from fedspendingtransparency/mod/9589-keep-focus

Mod/9589 keep focus

Author: nick-torres

components/table/TableData.jsx

@@ -3,7 +3,7 @@
  * Created by Lizzie Salita 5/14/20
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes, { oneOfType } from 'prop-types';
 import { uniqueId } from 'lodash';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -40,6 +40,14 @@ const TableData = ({
 }) => {
     const [firstClick, setFirstClick] = useState(false);
     const [rowIndexForMessage, setRowIndexForMessage] = useState();
+
+    const setFocus = () => {
+        const selectedElement = document.querySelector(".selected-row");
+        if (selectedElement) {
+            selectedElement.focus();
+        }
+    };
+
     const localClickHandler = (row, index) => {
         if (!atMaxLevel) {
             // user taps a row in mobile
@@ -63,6 +71,10 @@ const TableData = ({
         }
     };
 
+    useEffect(() => {
+        setFocus();
+    }, [rowIndexForMessage]);
+
     return (
         <>
             {rows.map((row, i) => {
@@ -90,7 +102,7 @@ const TableData = ({
                                 localClickHandler(row, i);
                             }
                         }}
-                        className={`usda-table__row-item usda-table__row${oddClass} ${subAward ? 'special-hover-color' : ''}`}
+                        className={`usda-table__row-item usda-table__row${oddClass} ${rowIndexForMessage === i ? 'selected-row' : ''} ${subAward ? 'special-hover-color' : ''}`}
                         style={{ height: rowHeight }}>
                         {row.map((data, j) => (
                             columns[j]?.bodyHeader

dist/index.js

@@ -361,4 +361,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)stories[\\\\/](?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.868a37cc.iframe.bundle.js"></script><script src="873.2012df82.iframe.bundle.js"></script><script src="main.2a7a1bfc.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)stories[\\\\/](?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.868a37cc.iframe.bundle.js"></script><script src="873.2012df82.iframe.bundle.js"></script><script src="main.f230da38.iframe.bundle.js"></script></body></html>

docs/iframe.html

@@ -1 +1 @@
-{"generatedAt":1741966670891,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.8.3"},"storybookVersion":"6.5.16","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/addon-console":{"version":"1.2.3"},"@storybook/react":{"version":"6.5.16"},"@storybook/source-loader":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"},"storybook":{"version":"5.3.22"}},"framework":{"name":"react"},"addons":{"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-a11y":{"version":"6.5.16"},"@storybook/addon-viewport":{"version":"6.5.16"},"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-controls":{"version":"6.5.16"}}}
+{"generatedAt":1742832472831,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.8.3"},"storybookVersion":"6.5.16","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/addon-console":{"version":"1.2.3"},"@storybook/react":{"version":"6.5.16"},"@storybook/source-loader":{"version":"6.5.16"},"@storybook/theming":{"version":"6.5.16"},"storybook":{"version":"5.3.22"}},"framework":{"name":"react"},"addons":{"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-a11y":{"version":"6.5.16"},"@storybook/addon-viewport":{"version":"6.5.16"},"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-controls":{"version":"6.5.16"}}}

docs/main.2a7a1bfc.iframe.bundle.js

@@ -1,6 +1,6 @@
 {
   "name": "data-transparency-ui",
-  "version": "6.3.7",
+  "version": "6.3.8",
   "description": "Library of UI components powering Data Transparency websites",
   "main": "dist/index.js",
   "style": "dist/data-transparency-ui.css",