From bc99b1e04334e20e57b4bb51b4141b0baecbd579 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Sat, 16 Sep 2023 16:50:43 +0100
Subject: [PATCH 1/3] :bug: (mobile) scrolling in lists with pull-to-refresh

---
 .../accounts/MobileAccountDetails.js          |  3 ++-
 .../src/components/accounts/MobileAccounts.js |  2 +-
 .../components/responsive/PullToRefresh.tsx   | 25 +++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 packages/desktop-client/src/components/responsive/PullToRefresh.tsx

diff --git a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js b/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
index e3dd2098505..5fabe2fcbdd 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
@@ -1,6 +1,5 @@
 import React, { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import { useActions } from '../../hooks/useActions';
 import Add from '../../icons/v1/Add';
@@ -12,6 +11,7 @@ import InputWithContent from '../common/InputWithContent';
 import Label from '../common/Label';
 import Text from '../common/Text';
 import View from '../common/View';
+import PullToRefresh from '../responsive/PullToRefresh';
 import CellValue from '../spreadsheet/CellValue';
 import { TransactionList } from '../transactions/MobileTransaction';
 
@@ -84,6 +84,7 @@ export default function AccountDetails({
 
   const { syncAndDownload } = useActions();
   const onRefresh = async () => {
+    console.log('refresh');
     await syncAndDownload(account.id);
   };
 
diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.js b/packages/desktop-client/src/components/accounts/MobileAccounts.js
index 457c645a463..e7a122d6b42 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccounts.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccounts.js
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import * as queries from 'loot-core/src/client/queries';
 
@@ -14,6 +13,7 @@ import Text from '../common/Text';
 import TextOneLine from '../common/TextOneLine';
 import View from '../common/View';
 import { Page } from '../Page';
+import PullToRefresh from '../responsive/PullToRefresh';
 import CellValue from '../spreadsheet/CellValue';
 
 function AccountHeader({ name, amount, style = {} }) {
diff --git a/packages/desktop-client/src/components/responsive/PullToRefresh.tsx b/packages/desktop-client/src/components/responsive/PullToRefresh.tsx
new file mode 100644
index 00000000000..d63331b5b03
--- /dev/null
+++ b/packages/desktop-client/src/components/responsive/PullToRefresh.tsx
@@ -0,0 +1,25 @@
+import React, { type ComponentProps } from 'react';
+import BasePullToRefresh from 'react-simple-pull-to-refresh';
+
+import { css } from 'glamor';
+
+type PullToRefreshProps = ComponentProps<typeof BasePullToRefresh>;
+
+export default function PullToRefresh(props: PullToRefreshProps) {
+  return (
+    <div style={{ overflow: 'auto', textAlign: 'center' }}>
+      <BasePullToRefresh
+        pullDownThreshold={80}
+        resistance={2}
+        className={String(
+          css({
+            '& .ptr__children': {
+              overflow: 'hidden auto',
+            },
+          }),
+        )}
+        {...props}
+      />
+    </div>
+  );
+}

From 0beda6220410623c6ab02f62ea5b4c61e2e9c37b Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Sat, 16 Sep 2023 16:54:44 +0100
Subject: [PATCH 2/3] Release notes

---
 .../src/components/responsive/PullToRefresh.tsx             | 5 ++++-
 upcoming-release-notes/1706.md                              | 6 ++++++
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 upcoming-release-notes/1706.md

diff --git a/packages/desktop-client/src/components/responsive/PullToRefresh.tsx b/packages/desktop-client/src/components/responsive/PullToRefresh.tsx
index d63331b5b03..5dba845680d 100644
--- a/packages/desktop-client/src/components/responsive/PullToRefresh.tsx
+++ b/packages/desktop-client/src/components/responsive/PullToRefresh.tsx
@@ -7,12 +7,15 @@ type PullToRefreshProps = ComponentProps<typeof BasePullToRefresh>;
 
 export default function PullToRefresh(props: PullToRefreshProps) {
   return (
-    <div style={{ overflow: 'auto', textAlign: 'center' }}>
+    <div style={{ overflow: 'auto' }}>
       <BasePullToRefresh
         pullDownThreshold={80}
         resistance={2}
         className={String(
           css({
+            '& .ptr__pull-down': {
+              textAlign: 'center',
+            },
             '& .ptr__children': {
               overflow: 'hidden auto',
             },
diff --git a/upcoming-release-notes/1706.md b/upcoming-release-notes/1706.md
new file mode 100644
index 00000000000..9c6857f774c
--- /dev/null
+++ b/upcoming-release-notes/1706.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Mobile: fix transaction list scrolling requiring a previous interaction before scroll happens

From 76604ef686fbba2acd213bd3a04d6f9afde63b74 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Sat, 16 Sep 2023 16:59:08 +0100
Subject: [PATCH 3/3] Remove console.log

---
 .../src/components/accounts/MobileAccountDetails.js              | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js b/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
index 5fabe2fcbdd..b5cbcc4e3a4 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
@@ -84,7 +84,6 @@ export default function AccountDetails({
 
   const { syncAndDownload } = useActions();
   const onRefresh = async () => {
-    console.log('refresh');
     await syncAndDownload(account.id);
   };