Merge pull request #1956 from oasisprotocol/ml/prevent-scroll-input-n…

…umber

Prevent value change on number input wheel scroll

.changelog/1956.bugfix.md

@@ -0,0 +1 @@
+Prevent value change on number input wheel scroll

playwright/tests/transfer.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test'
+import { privateKey, privateKeyAddress } from '../../src/utils/__fixtures__/test-inputs'
+import { fillPrivateKeyWithoutPassword } from '../utils/fillPrivateKey'
+import { warnSlowApi } from '../utils/warnSlowApi'
+import { mockApi } from '../utils/mockApi'
+
+test.beforeEach(async ({ page }) => {
+  await warnSlowApi(page)
+  await mockApi(page, 123)
+
+  await page.goto('/open-wallet/private-key')
+  await fillPrivateKeyWithoutPassword(page, {
+    privateKey: privateKey,
+    privateKeyAddress: privateKeyAddress,
+    persistenceCheckboxDisabled: false,
+  })
+  await expect(page.getByTestId('account-selector')).toBeVisible()
+})
+
+test('Scrolling on amount input field should preserve value', async ({ page }) => {
+  await page.getByTestId('nav-myaccount').click()
+
+  const input = page.getByPlaceholder('Enter an amount')
+  await input.click()
+  await input.fill('1111')
+  const inputPosition = await input.boundingBox()
+  await page.mouse.move(
+    inputPosition!.x + inputPosition!.width / 2,
+    inputPosition!.y + inputPosition!.height / 2,
+  )
+  await page.mouse.wheel(0, 10)
+  await page.mouse.wheel(0, 10)
+  await page.mouse.wheel(0, 10)
+  await expect(input).toHaveValue('1111')
+})

src/app/components/AddEscrowForm/index.tsx

@@ -19,8 +19,8 @@ import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import React, { memo, useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-
 import { TransactionStatus } from '../TransactionStatus'
+import { usePreventChangeOnNumberInputScroll } from '../../lib/usePreventChangeOnNumberInputScroll'
 
 interface Props {
   validatorAddress: string
@@ -39,6 +39,7 @@ export const AddEscrowForm = memo((props: Props) => {
   const minStaking = useSelector(selectMinStaking)
   const ticker = useSelector(selectTicker)
   const isMobile = useContext(ResponsiveContext) === 'small'
+  const { onWheel } = usePreventChangeOnNumberInputScroll()
   const delegate = () => {
     dispatch(
       transactionActions.addEscrow({
@@ -111,6 +112,7 @@ export const AddEscrowForm = memo((props: Props) => {
                   </Text>
                 }
                 reverse
+                onWheel={onWheel}
               />
             </Box>
             <Button label={t('account.addEscrow.delegate', 'Delegate')} type="submit" primary />

src/app/components/ReclaimEscrowForm/index.tsx

@@ -20,6 +20,7 @@ import { StringifiedBigInt } from 'types/StringifiedBigInt'
 import { TransactionStatus } from '../TransactionStatus'
 import { selectTicker } from '../../state/network/selectors'
 import { AmountFormatter } from '../AmountFormatter'
+import { usePreventChangeOnNumberInputScroll } from '../../lib/usePreventChangeOnNumberInputScroll'
 
 interface Props {
   /** Currently delegated amount */
@@ -109,6 +110,7 @@ export const ReclaimEscrowForm = memo((props: Props) => {
               </Text>
             }
             reverse
+            {...usePreventChangeOnNumberInputScroll()}
           />
           <Box align="end" margin={{ top: 'xsmall' }}>
             <Text weight="bolder" size="small">

src/app/lib/__tests__/usePreventChangeOnNumberInputScroll.test.tsx

@@ -0,0 +1,36 @@
+import { render, fireEvent, act, waitFor } from '@testing-library/react'
+import { TextInput } from 'grommet/es6/components/TextInput'
+import { usePreventChangeOnNumberInputScroll } from '../usePreventChangeOnNumberInputScroll'
+
+const TextInputFormItem = () => (
+  <TextInput role="input" type="number" {...usePreventChangeOnNumberInputScroll()} />
+)
+
+describe('usePreventChangeOnNumberInputScroll', () => {
+  it('Should focus on input that is already in focus', async () => {
+    const { getByRole } = render(<TextInputFormItem />)
+
+    const numberInput = getByRole('input')
+    fireEvent.change(numberInput, { target: { value: '123' } })
+
+    act(() => {
+      fireEvent.focus(numberInput)
+      fireEvent.wheel(numberInput)
+    })
+
+    waitFor(() => expect(numberInput).toHaveFocus())
+    expect(numberInput).toHaveValue(123)
+  })
+
+  it('Should not focus on input that is not focused', async () => {
+    const { getByRole } = render(<TextInputFormItem />)
+
+    const numberInput = getByRole('input')
+
+    act(() => {
+      fireEvent.wheel(numberInput)
+    })
+
+    expect(numberInput).not.toHaveFocus()
+  })
+})

src/app/lib/usePreventChangeOnNumberInputScroll.ts

@@ -0,0 +1,23 @@
+import { TextInputProps } from 'grommet/es6/components/TextInput'
+
+export const usePreventChangeOnNumberInputScroll = ({ onWheel }: Pick<TextInputProps, 'onWheel'> = {}): Pick<
+  TextInputProps,
+  'onWheel'
+> => {
+  return {
+    onWheel: e => {
+      onWheel?.(e)
+
+      const target = e.target as HTMLElement
+      if (target !== document.activeElement) return
+
+      // Prevents input value change
+      target.blur()
+
+      // Focus after blur
+      setTimeout(() => {
+        target.focus()
+      }, 0)
+    },
+  }
+}

src/app/pages/AccountPage/Features/SendTransaction/index.tsx

@@ -15,7 +15,8 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { parseRoseStringToBaseUnitString } from 'app/lib/helpers'
-import { selectTicker } from '../../../../state/network/selectors'
+import { selectTicker } from 'app/state/network/selectors'
+import { usePreventChangeOnNumberInputScroll } from 'app/lib/usePreventChangeOnNumberInputScroll'
 
 export interface SendTransactionProps {
   isAddressInWallet: boolean
@@ -118,6 +119,7 @@ export function SendTransaction(props: SendTransactionProps) {
                 </Text>
               }
               reverse
+              {...usePreventChangeOnNumberInputScroll()}
             />
           </FormField>
           <Box direction="row" justify="between" margin={{ top: 'medium' }}>

src/app/pages/ParaTimesPage/TransactionAmount/FeesSection.tsx

@@ -5,6 +5,7 @@ import { Collapsible } from 'grommet/es6/components/Collapsible'
 import { FormField } from 'grommet/es6/components/FormField'
 import { TextInput } from 'grommet/es6/components/TextInput'
 import { useTranslation } from 'react-i18next'
+import { usePreventChangeOnNumberInputScroll } from 'app/lib/usePreventChangeOnNumberInputScroll'
 
 type FeesSectionProps = {
   feeAmount: string
@@ -46,6 +47,7 @@ export const FeesSection = ({ feeAmount, feeGas, ticker }: FeesSectionProps) =>
             step="1"
             type="number"
             value={feeAmount}
+            {...usePreventChangeOnNumberInputScroll()}
           />
         </FormField>
         <FormField
@@ -62,6 +64,7 @@ export const FeesSection = ({ feeAmount, feeGas, ticker }: FeesSectionProps) =>
             step="1"
             type="number"
             value={feeGas}
+            {...usePreventChangeOnNumberInputScroll()}
           />
         </FormField>
       </Collapsible>