From 1563296d7a733cbe826d839b3c94fdb70014baee Mon Sep 17 00:00:00 2001 From: Carlos Andres Perez Ubeda Date: Tue, 7 Jan 2025 19:03:14 -0600 Subject: [PATCH 1/2] feat(finance-quick-transfer): enhance slider and input UX - Added `focusOnSelect` to improve slider usability in `finance-quick-transfer.tsx`. - Introduced a slight delay when focusing the input after amount change to ensure smoother user interactions. These changes enhance the overall user experience and ensure better accessibility. --- src/sections/finance/components/finance-quick-transfer.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/sections/finance/components/finance-quick-transfer.tsx b/src/sections/finance/components/finance-quick-transfer.tsx index fd4949c8..1019af42 100644 --- a/src/sections/finance/components/finance-quick-transfer.tsx +++ b/src/sections/finance/components/finance-quick-transfer.tsx @@ -105,6 +105,7 @@ export default function FinanceQuickTransfer({ centerMode: true, swipeToSlide: true, infinite: true, + focusOnSelect: true, centerPadding: '0px', rows: 1, slidesToShow: list?.length > 7 ? 7 : (list?.length ?? 1), @@ -199,6 +200,11 @@ export default function FinanceQuickTransfer({ // Handle changes in the input for the amount const handleChangeInput = useCallback((event: React.ChangeEvent) => { setAmount(Number(event.target.value)); + + setTimeout(() => { + event.target.focus(); + }, 25); + }, []); // Validate the amount on blur From 5d418ad2aa1d241d63814a2ca2f8519b0cf93386 Mon Sep 17 00:00:00 2001 From: Carlos Andres Perez Ubeda Date: Tue, 7 Jan 2025 21:33:45 -0600 Subject: [PATCH 2/2] fix(finance): ensure input focus persistence on amount change - Updated `finance-quick-transfer.tsx` to add a workaround that maintains the focus on the input field after updates. - This resolves an issue where the slider carousel interferes with user input experience by shifting focus away. --- src/sections/finance/components/finance-quick-transfer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/sections/finance/components/finance-quick-transfer.tsx b/src/sections/finance/components/finance-quick-transfer.tsx index 1019af42..2edc85e4 100644 --- a/src/sections/finance/components/finance-quick-transfer.tsx +++ b/src/sections/finance/components/finance-quick-transfer.tsx @@ -201,6 +201,7 @@ export default function FinanceQuickTransfer({ const handleChangeInput = useCallback((event: React.ChangeEvent) => { setAmount(Number(event.target.value)); + // Send the focus back to the input field, this is a workaround for the slider carousel setTimeout(() => { event.target.focus(); }, 25);