Bugfix row render (#1402)

* Fix re-rendering all rows on hover

* release note

* Removing isHover logic in place of css :hover

---------

Co-authored-by: biohzrddd <10577752+biohzrddd@users.noreply.github.com>

packages/desktop-client/src/components/transactions/TransactionsTable.js

@@ -678,7 +678,6 @@ const Transaction = memo(function Transaction(props) {
     showCleared,
     showZeroInDeposit,
     style,
-    hovered,
     selected,
     highlighted,
     added,
@@ -694,7 +693,6 @@ const Transaction = memo(function Transaction(props) {
     hideFraction,
     onSave,
     onEdit,
-    onHover,
     onDelete,
     onSplit,
     onManagePayees,
@@ -804,7 +802,7 @@ const Transaction = memo(function Transaction(props) {
   let isOffBudget = account && account.offbudget === 1;
 
   let valueStyle = added ? { fontWeight: 600 } : null;
-  let backgroundFocus = hovered || focusedField === 'select';
+  let backgroundFocus = focusedField === 'select';
   let amountStyle = hideFraction ? { letterSpacing: -0.5 } : null;
 
   let statusProps = getStatusProps(notes);
@@ -820,6 +818,12 @@ const Transaction = memo(function Transaction(props) {
             ? theme.tableRowBackgroundHover
             : theme.tableBackground,
         },
+        {
+          ':hover': {
+            backgroundColor: theme.tableRowBackgroundHover,
+            color: theme.tableRowBackgroundHighlightText,
+          },
+        },
         highlighted || selected
           ? { color: theme.tableRowBackgroundHighlightText }
           : { color: theme.tableText },
@@ -830,7 +834,6 @@ const Transaction = memo(function Transaction(props) {
         },
         _unmatched && { opacity: 0.5 },
       ]}
-      onMouseEnter={() => onHover && onHover(transaction.id)}
     >
       {isChild && (
         <Field
@@ -861,7 +864,7 @@ const Transaction = memo(function Transaction(props) {
         isChild ? (
           <DeleteCell
             onDelete={() => onDelete && onDelete(transaction.id)}
-            exposed={hovered || editing}
+            exposed={editing}
             style={[isChild && { borderLeftWidth: 1 }, { lineHeight: 0 }]}
           />
         ) : (
@@ -870,7 +873,7 @@ const Transaction = memo(function Transaction(props) {
       ) : (
         <SelectCell
           /* Checkmark field for non-child transaction */
-          exposed={hovered || selected || editing}
+          exposed={selected || editing}
           focused={focusedField === 'select'}
           onSelect={e => {
             dispatchSelected({ type: 'select', id: transaction.id, event: e });
@@ -1318,7 +1321,6 @@ function NewTransaction({
   categoryGroups,
   payees,
   editingTransaction,
-  hoveredTransaction,
   focusedField,
   showAccount,
   showCategory,
@@ -1326,7 +1328,6 @@ function NewTransaction({
   showCleared,
   dateFormat,
   hideFraction,
-  onHover,
   onClose,
   onSplit,
   onEdit,
@@ -1355,13 +1356,12 @@ function NewTransaction({
           onClose();
         }
       }}
-      onMouseLeave={() => onHover(null)}
     >
       {transactions.map((transaction, idx) => (
         <Transaction
+          isNew
           key={transaction.id}
           editing={editingTransaction === transaction.id}
-          hovered={hoveredTransaction === transaction.id}
           transaction={transaction}
           showAccount={showAccount}
           showCategory={showCategory}
@@ -1375,7 +1375,6 @@ function NewTransaction({
           dateFormat={dateFormat}
           hideFraction={hideFraction}
           expanded={true}
-          onHover={onHover}
           onEdit={onEdit}
           onSave={onSave}
           onSplit={onSplit}
@@ -1431,7 +1430,6 @@ function TransactionTableInner({
   dateFormat = 'MM/dd/yyyy',
   newNavigator,
   renderEmpty,
-  onHover,
   onScroll,
   ...props
 }) {
@@ -1471,7 +1469,6 @@ function TransactionTableInner({
     const {
       transactions,
       selectedItems,
-      hoveredTransaction,
       accounts,
       categoryGroups,
       payees,
@@ -1487,7 +1484,6 @@ function TransactionTableInner({
     } = props;
 
     let trans = item;
-    let hovered = hoveredTransaction === trans.id;
     let selected = selectedItems.has(trans.id);
 
     let parent = props.transactionMap.get(trans.parent_id);
@@ -1527,7 +1523,6 @@ function TransactionTableInner({
           showCategory={showCategory}
           showBalance={showBalances}
           showCleared={showCleared}
-          hovered={hovered}
           selected={selected}
           highlighted={false}
           added={isNew?.(trans.id)}
@@ -1544,7 +1539,6 @@ function TransactionTableInner({
           }
           dateFormat={dateFormat}
           hideFraction={hideFraction}
-          onHover={onHover}
           onEdit={tableNavigator.onEdit}
           onSave={props.onSave}
           onDelete={props.onDelete}
@@ -1592,7 +1586,6 @@ function TransactionTableInner({
             <NewTransaction
               transactions={props.newTransactions}
               editingTransaction={newNavigator.editingId}
-              hoveredTransaction={props.hoveredTransaction}
               focusedField={newNavigator.focusedField}
               accounts={props.accounts}
               categoryGroups={props.categoryGroups}
@@ -1610,7 +1603,6 @@ function TransactionTableInner({
               onEdit={newNavigator.onEdit}
               onSave={props.onSave}
               onDelete={props.onDelete}
-              onHover={onHover}
               onManagePayees={props.onManagePayees}
               onCreatePayee={props.onCreatePayee}
               onNavigateToTransferAccount={onNavigateToTransferAccount}
@@ -1625,7 +1617,6 @@ function TransactionTableInner({
       <View
         style={[{ flex: 1, overflow: 'hidden' }]}
         data-testid="transaction-table"
-        onMouseLeave={() => onHover(null)}
       >
         <Table
           navigator={tableNavigator}
@@ -1661,9 +1652,6 @@ function TransactionTableInner({
 
 export let TransactionTable = forwardRef((props, ref) => {
   let [newTransactions, setNewTransactions] = useState(null);
-  let [hoveredTransaction, setHoveredTransaction] = useState(
-    props.hoveredTransaction,
-  );
   let [prevIsAdding, setPrevIsAdding] = useState(false);
   let splitsExpanded = useSplitsExpanded();
   let prevSplitsExpanded = useRef(null);
@@ -1917,10 +1905,6 @@ export let TransactionTable = forwardRef((props, ref) => {
     [props.onSave],
   );
 
-  let onHover = useCallback(id => {
-    setHoveredTransaction(id);
-  }, []);
-
   let onDelete = useCallback(id => {
     let temporary = isTemporaryId(id);
 
@@ -2014,9 +1998,7 @@ export let TransactionTable = forwardRef((props, ref) => {
       transactions={transactions}
       transactionMap={transactionMap}
       selectedItems={selectedItems}
-      hoveredTransaction={hoveredTransaction}
       isExpanded={splitsExpanded.expanded}
-      onHover={onHover}
       onSave={onSave}
       onDelete={onDelete}
       onSplit={onSplit}

upcoming-release-notes/1402.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [biohzrddd]
+---
+
+Fix bug where all Account Transaction rows would be re-rendered on hover of a single Transaction row