diff --git a/src/number_format_base.tsx b/src/number_format_base.tsx index b8f6781..b3c5ec9 100644 --- a/src/number_format_base.tsx +++ b/src/number_format_base.tsx @@ -191,17 +191,14 @@ export default function NumberFormatBase( /** * if the formatted value is not synced to parent, or if the formatted value is different from last synced value sync it - * we also don't need to sync to the parent if no formatting is applied * if the formatting props is removed, in which case last formatted value will be different from the numeric string value * in such case we need to inform the parent. */ useEffect(() => { const { formattedValue: lastFormattedValue, numAsString: lastNumAsString } = lastUpdatedValue.current; - if ( - formattedValue !== lastFormattedValue && - (formattedValue !== numAsString || lastFormattedValue !== lastNumAsString) - ) { + + if (formattedValue !== lastFormattedValue || numAsString !== lastNumAsString) { _onValueChange(getValueObject(formattedValue, numAsString), { event: undefined, source: SourceType.props, diff --git a/test/library/input.spec.jsx b/test/library/input.spec.jsx index a866c79..b601a09 100644 --- a/test/library/input.spec.jsx +++ b/test/library/input.spec.jsx @@ -439,27 +439,6 @@ describe('NumberFormat as input', () => { }); }); - it('should not call onValueChange if no formatting is applied', async () => { - const mockOnValueChange = vi.fn(); - - const { rerender } = await render(); - - expect(mockOnValueChange).not.toHaveBeenCalled(); - - rerender(); - expect(mockOnValueChange).not.toHaveBeenCalled(); - - rerender(); - expect(mockOnValueChange).not.toHaveBeenCalled(); - - rerender(); - expect(mockOnValueChange.mock.lastCall[0]).toEqual({ - formattedValue: '1,234', - value: '1234', - floatValue: 1234, - }); - }); - it('should always call setState when input is not on focus and value formatting is changed from outside', async () => { const { input, user, rerender } = await render( , @@ -526,7 +505,7 @@ describe('NumberFormat as input', () => { expect(source).toEqual('event'); }); - it('should call onValueChange when value changes', async () => { + it('should call onValueChange when value changes via user input', async () => { const mockOnValueChange = vi.fn(); const { input, user, rerender } = await render( @@ -545,8 +524,73 @@ describe('NumberFormat as input', () => { ); expect(mockOnValueChange).toHaveBeenCalled(); + mockOnValueChange.mockReset(); + await simulateKeyInput(user, input, '5', 0); expect(input).toHaveValue('51,234'); + expect(mockOnValueChange).toHaveBeenCalled(); + + await simulateKeyInput(user, input, '{Backspace}', 6); + expect(input).toHaveValue('5,123'); + expect(mockOnValueChange).toHaveBeenCalled(); + + mockOnValueChange.mockReset(); + + await simulateKeyInput(user, input, '{Backspace}', 5); + expect(input).toHaveValue('512'); + expect(mockOnValueChange).toHaveBeenCalled(); + + mockOnValueChange.mockReset(); + + await simulateKeyInput(user, input, '{Backspace}', 4); + expect(input).toHaveValue('51'); + expect(mockOnValueChange).toHaveBeenCalled(); + }); + + it('should call onValueChange when value changes via props', async () => { + const mockOnValueChange = vi.fn(); + + const { input, rerender } = await render( + , + ); + + expect(input).toHaveValue('1234'); + + rerender( + , + ); + expect(mockOnValueChange).toHaveBeenCalled(); + + mockOnValueChange.mockReset(); + + rerender( + , + ); + expect(mockOnValueChange).toHaveBeenCalled(); + + mockOnValueChange.mockReset(); + + rerender( + , + ); + expect(mockOnValueChange).toHaveBeenCalled(); + + console.log({ input }); }); it('should treat Infinity value as empty string', async () => {