diff --git a/package.json b/package.json index 2214ff344..518481ccb 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "browser-assert": "1.2.1", "chromatic": "6.19.9", "classnames": "2.3.2", - "cypress": "13.6.6", + "cypress": "13.10.0", "date-fns": "3.3.1", "dayjs": "1.11.10", "diacritics": "1.3.0", diff --git a/src/cypress/commands/fill/fillNumberInput.ts b/src/cypress/commands/fill/fillNumberInput.ts index 84faf9413..596cbf3dd 100644 --- a/src/cypress/commands/fill/fillNumberInput.ts +++ b/src/cypress/commands/fill/fillNumberInput.ts @@ -15,12 +15,12 @@ export function fillNumberInput( cy.wrap(fieldElement).scrollIntoView({ offset: { left: 0, top: -100 } }) - cy.wrap(fieldElement).find('input[type="number"]').clear({ force }).wait(250) + cy.wrap(fieldElement).find('input[inputmode="numeric"]').clear({ force }).wait(250) // If `value` is undefined, we don't need to input anything if (!value) { return } - cy.wrap(fieldElement).find('input[type="number"]').type(String(value), { delay, force }).wait(250) + cy.wrap(fieldElement).find('input[inputmode="numeric"]').type(String(value), { delay, force }).wait(250) } diff --git a/src/fields/NumberInput.tsx b/src/fields/NumberInput.tsx index 8ce692781..7c1e7a370 100644 --- a/src/fields/NumberInput.tsx +++ b/src/fields/NumberInput.tsx @@ -1,5 +1,5 @@ import classnames from 'classnames' -import { useCallback, useMemo, useRef, type FocusEvent } from 'react' +import { useCallback, useMemo, useRef } from 'react' import { Input, type InputProps } from 'rsuite' import styled from 'styled-components' @@ -13,7 +13,6 @@ import { FieldError } from '../elements/FieldError' import { Label } from '../elements/Label' import { useFieldUndefineEffect } from '../hooks/useFieldUndefineEffect' import { useKey } from '../hooks/useKey' -import { usePreventWheelEvent } from '../hooks/usePreventWheelEvent' import { normalizeString } from '../utils/normalizeString' import type { CommonFieldStyleProps } from './shared/types' @@ -46,9 +45,7 @@ export function NumberInput({ isUndefinedWhenDisabled = false, label, name, - onBlur, onChange, - onFocus, readOnly = false, style, value, @@ -62,43 +59,23 @@ export function NumberInput({ const hasError = useMemo(() => Boolean(controlledError), [controlledError]) const key = useKey([disabled, name]) - const preventWheelEvent = usePreventWheelEvent(inputRef) - const handleChange = useCallback( (nextValue: string) => { if (!onChange) { return } + if (nextValue === '') { + onChange(undefined) + } const normalizedNextValueAsString = nextValue && nextValue.length ? nextValue : undefined const nextValueAsNumber = Number(normalizedNextValueAsString) - const normalizedNextValue = !Number.isNaN(nextValueAsNumber) ? nextValueAsNumber : undefined - - onChange(normalizedNextValue) - }, - [onChange] - ) - - const handleBlur = useCallback( - (event: FocusEvent) => { - event.target.removeEventListener('wheel', preventWheelEvent) - - if (onBlur) { - onBlur(event) - } - }, - [onBlur, preventWheelEvent] - ) - - const handleFocus = useCallback( - (event: FocusEvent) => { - event.target.addEventListener('wheel', preventWheelEvent) - - if (onFocus) { - onFocus(event) + if (Number.isNaN(nextValueAsNumber)) { + return } + onChange(nextValueAsNumber) }, - [onFocus, preventWheelEvent] + [onChange] ) useFieldUndefineEffect(isUndefinedWhenDisabled && !!disabled, onChange) @@ -119,11 +96,11 @@ export function NumberInput({ $isTransparent={isTransparent} disabled={disabled} id={name} - onBlur={handleBlur} + inputMode="numeric" + maxLength="12" onChange={handleChange} - onFocus={handleFocus} readOnly={readOnly} - type="number" + type="text" value={value ?? ''} {...originalProps} /> diff --git a/yarn.lock b/yarn.lock index 6ee486718..be80532b0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3219,7 +3219,7 @@ __metadata: browser-assert: "npm:1.2.1" chromatic: "npm:6.19.9" classnames: "npm:2.3.2" - cypress: "npm:13.6.6" + cypress: "npm:13.10.0" date-fns: "npm:3.3.1" dayjs: "npm:1.11.10" diacritics: "npm:1.3.0" @@ -9791,9 +9791,9 @@ __metadata: languageName: node linkType: hard -"cypress@npm:13.6.6": - version: 13.6.6 - resolution: "cypress@npm:13.6.6" +"cypress@npm:13.10.0": + version: 13.10.0 + resolution: "cypress@npm:13.10.0" dependencies: "@cypress/request": "npm:^3.0.0" "@cypress/xvfb": "npm:^1.2.4" @@ -9839,7 +9839,7 @@ __metadata: yauzl: "npm:^2.10.0" bin: cypress: bin/cypress - checksum: 1f152ac3708fc35c822b6fe428c0856b568c9b2d3f03a22de0526b9f21d6c345139061ae3515a652538a9570a2a632516e4548b29b39843865b9c88288b2d668 + checksum: ab53083b0557e6c1a1de0992563df91a75676113fc5d980fc36bdebeff4ea2eb2b66e67d504dbb36b4bdf33362aa738e98446f219755414e45135f48b607c1e3 languageName: node linkType: hard