Hover State on Table Rows Not Working Properly

[kimschulke]

Expected Behavior

When a user hovers their mouse over a single row within a table, that row should appear with a light grey hover state

Current Behavior

Currently, when you mouse over the table quickly, the hover states gets stuck on multiple rows simultaneously

Possible Cause

No idea what the cause could be

Steps to Reproduce

1. Navigate to any page with a table (Agreements List or Budget Lines List)
2. Move your mouse across the table (up and down, back and forth)
3. This will cause you to see multiple rows in a hover state at one time

Context

Dev, Admin User The hover state is intended to show the user where their mouse is hovering over. If multiple rows are showing a hover state it becomes impossible to know which one is accurate and may be confusing to the user. ## Detailed Description Improve hover state so only row will be in hover state at a single time. ## Possible Implementation

[kimschulke]

Example here:

[tdonaworth]

I can see this occur on the BLI List, but can't seem to get it to repeat on Agreement List page

[kimschulke]

@tdonaworth Thats accurate. Seems to be only on the BLI list page. Just double checked.

[tdonaworth]

Updated the Bug to reflect only BLI List page.

[fpigeonjr]

looked into this and so far have made some improvements with #1440 and #1444

• css is used for row hover styling
• js is used to manage state of icons
• problem persists but if row gets stuck, only the icon gets stuck and not the background color
• attempted to use React.memo and React.ref for better performance gains but still experienced the issue

[fpigeonjr]

@jonnalley, I will move on to more pressing issues if you would like to return this bug to the proper placement in the backlog

[jonnalley]

9/28