Keep legacy values

toptal · Nov 5, 2024 · 617d238 · 617d238
1 parent 8dcf27a
commit 617d238
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 6 deletions.
diff --git a/packages/base/NumberInput/src/NumberInput/NumberInput.tsx b/packages/base/NumberInput/src/NumberInput/NumberInput.tsx
@@ -97,8 +97,13 @@ export const NumberInput = forwardRef<HTMLInputElement, Props>(
         inputProps={{
           ...rest,
           step,
-          min,
-          max,
+          /*
+          Set "max" and "min" to Infinity and -Infinity to
+          - keep same width calculation for the input as before to avoid breaking visuals ("max" and "min" were always set to Infinity before)
+          - prevent browser from doing a step validation on submit (see the https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch for details)
+          */
+          min: -Infinity,
+          max: Infinity,
           // TODO: [FX-6102] Add test for wheel event
           onWheel: enableChangeOnMouseWheel
             ? undefined

diff --git a/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap b/packages/base/NumberInput/src/NumberInput/__snapshots__/test.tsx.snap
@@ -10,8 +10,8 @@ exports[`NumberInput renders 1`] = `
     <input
       aria-invalid="false"
       class="base-Input [&::-webkit-calendar-picker-indicator]:bg bg-transparent border-none box-border cursor-[inherit] h-full outline-none p-0 peer resize-none w-full text-md leading-4 text-black [&::placeholder]:text-gray [&::placeholder]:opacity-100 [&::-webkit-outer-spin-button]:appearance [&::-webkit-outer-spin-button]:m [&::-webkit-inner-spin-button]:appearance [&::-webkit-inner-spin-button]:m [-moz"
-      max="100"
-      min="-100"
+      max="Infinity"
+      min="-Infinity"
       step="5"
       type="number"
       value="10"

diff --git a/packages/base/NumberInput/src/NumberInput/test.tsx b/packages/base/NumberInput/src/NumberInput/test.tsx
@@ -42,7 +42,7 @@ describe('NumberInput', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  it('increase value', async () => {
+  it('increases value by step', async () => {
     const { getByDisplayValue, queryAllByRole } = renderNumberInput()
 
     const input = getByDisplayValue('10') as HTMLInputElement
@@ -55,7 +55,7 @@ describe('NumberInput', () => {
     expect(input.value).toBe('15')
   })
 
-  it('decrease value', () => {
+  it('decreases value by step', () => {
     const { getByDisplayValue, queryAllByRole } = renderNumberInput()
 
     const input = getByDisplayValue('10') as HTMLInputElement

diff --git a/packages/picasso-forms/src/NumberInput/test copy.tsx b/packages/picasso-forms/src/NumberInput/test copy.tsx
@@ -0,0 +1,32 @@
+// import { Input } from '@toptal/picasso-input'
+// import { act, render, fireEvent } from '@toptal/picasso-test-utils'
+// import { noop } from '@toptal/picasso-utils'
+// import React from 'react'
+
+// import { FormCompound as Form } from '../FormCompound'
+// import FieldWrapper from './FieldWrapper'
+
+// const renderFieldWrapper = () =>
+//   render(
+//     <Form onSubmit={noop}>
+//       <FieldWrapper name='name' required>
+//         {(inputProps: any) => <Input {...inputProps} />}
+//       </FieldWrapper>
+
+//       <Form.SubmitButton data-testid='submit'>Submit</Form.SubmitButton>
+//     </Form>
+//   )
+
+// describe('FieldWrapper', () => {
+//   describe('when there is a field error', () => {
+//     it('passes status to its children', () => {
+//       const { getByTestId, getByText } = renderFieldWrapper()
+
+//       act(() => {
+//         fireEvent.click(getByTestId('submit'))
+//       })
+
+//       expect(getByText('Please complete this field.')).toBeVisible()
+//     })
+//   })
+// })