Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LF-4618 Fix remove error entry when click X on number input #3643

Open
wants to merge 3 commits into
base: integration
Choose a base branch
from
Open

LF-4618 Fix remove error entry when click X on number input #3643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e18811a
LF-4618: fix initialvalue
Tbrid Jan 13, 2025
3fbbf5d
LF-4618: Remove console log
Tbrid Jan 13, 2025
2ed9bd0
LF-4618: Use reset value
Tbrid Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/webapp/src/components/Animals/AddAnimalsFormCard/AddAnimalsFormCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ export default function AddAnimalsFormCard({
label={t('common:COUNT')}
className={styles.countInput}
allowDecimal={false}
defaultValue={1}
showStepper
rules={{
required: {
Expand Down
2 changes: 1 addition & 1 deletion packages/webapp/src/components/Form/NumberInput/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default function NumberInput<T extends FieldValues>({
{...inputProps}
className={className}
error={fieldState.error?.message}
onResetIconClick={reset}
onResetIconClick={() => reset(defaultValue)}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

initialValue is field.value || get(formState.defaultValues, name) || defaultValue, so I don't think this would work unless defaultValue is passed to this component.
Can we think of a way to use the correct initialValue instead?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure what you mean? The defaultValue is being passed as a prop.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, the issue is that initialValue is set as field.value || get(formState.defaultValues, name) || defaultValue (line 64), but reset() sets the value to defaultValue.

LiteFarm/packages/webapp/src/components/Form/NumberInput/index.tsx

Lines 63 to 65 in 0f8a278

const { inputProps, reset, numericValue, increment, decrement } = useNumberInput({
initialValue: field.value || get(formState.defaultValues, name) || defaultValue,
allowDecimal,

When resetting, we expect the input to display initialValue, but if field.value or get(formState.defaultValues, name) is used, reset() won’t work as expected.

reset: () => update(initialValue ?? NaN) in useNumberInput seems correct, but the problem is that initialValue changes. Can you think of a way to ensure reset() always works when field.value or get(formState.defaultValues, name) is used as initialValue?

leftSection={currencySymbol}
rightSection={
<>
Expand Down
6 changes: 3 additions & 3 deletions packages/webapp/src/components/Form/NumberInput/useNumberInput.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@ export default function useNumberInput({
const stepDecimalPlaces = countDecimalPlaces(step);
const options: Intl.NumberFormatOptions = {
useGrouping,
minimumFractionDigits: !allowDecimal ? undefined : decimalDigits ?? stepDecimalPlaces,
maximumFractionDigits: !allowDecimal ? 0 : decimalDigits ?? (stepDecimalPlaces || 20),
minimumFractionDigits: !allowDecimal ? undefined : (decimalDigits ?? stepDecimalPlaces),
maximumFractionDigits: !allowDecimal ? 0 : (decimalDigits ?? (stepDecimalPlaces || 20)),
};

return createNumberFormatter(locale, options);
Expand Down Expand Up @@ -199,7 +199,7 @@ export default function useNumberInput({
return {
numericValue,
inputProps,
reset: () => update(initialValue ?? NaN),
reset: (value?: number | null) => update(value ? value : NaN),
clear: () => update(NaN),
update,
increment,
Expand Down
Loading