Skip to content

Commit

Permalink
(fix) parse NumberInput value to a number (#367)
Browse files Browse the repository at this point in the history
* parse NumberInputValue to Number

* wrap change handler in a useCallback
  • Loading branch information
kajambiya authored Aug 20, 2024
1 parent 975cb53 commit 8e30a8e
Showing 1 changed file with 7 additions and 2 deletions.
9 changes: 7 additions & 2 deletions src/components/inputs/number/number.component.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useMemo, useState } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import { Layer, NumberInput } from '@carbon/react';
import classNames from 'classnames';
import { isTrue } from '../../../utils/boolean-utils';
Expand All @@ -22,6 +22,11 @@ const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
}
};

const handleChange = useCallback((event) => {
const parsedValue = Number(event.target.value);
setFieldValue(isNaN(parsedValue) ? undefined : parsedValue);
}, [setFieldValue]);

const isInline = useMemo(() => {
if (['view', 'embedded-view'].includes(sessionMode) || isTrue(field.readonly)) {
return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
Expand Down Expand Up @@ -49,7 +54,7 @@ const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
min={Number(field.questionOptions.min) || undefined}
name={field.id}
value={field.value ?? ''}
onChange={setFieldValue}
onChange={handleChange}
onBlur={onBlur}
allowEmpty={true}
size="lg"
Expand Down

0 comments on commit 8e30a8e

Please sign in to comment.