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

Tbrid · 2025-01-13T18:26:18Z

Description

Bug: error value in animals count input not restored to default value when clicking "X".
Cause: default value not being used and logic of restoring default is wrong.
Fix: Change default value logic to be using prop default value instead of current value in the field and add default value prop to field input

Jira link: https://lite-farm.atlassian.net/browse/LF-4618

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Passes test case
UI components visually reviewed on desktop view
UI components visually reviewed on mobile view
Other (please explain)

Checklist:

I have commented my code, particularly in hard-to-understand areas
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
The precommit and linting ran successfully
I have added or updated language tags for text that's part of the UI
I have added "MISSING" for all new language tags to languages I don't speak
I have added the GNU General Public License to all new files

Duncan-Brain

Hi @Tbrid I think the defaultValue was placed as the last option was for the case where one arrives at the form with pre-filled values.

So one example is when you navigate to the next page of the form and then you go back in the form flow:

Screen.Recording.2025-01-16.at.7.19.10.PM.mov

One other thing about this field surprises me: it does not validate when blurred. It validates when another field is validated which makes sense. But it seems like it should also be validating on blur.

Duncan-Brain

Thanks looking good to me !

SayakaOno · 2025-01-28T21:24:06Z

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

@@ -86,7 +86,7 @@ export default function NumberInput<T extends FieldValues>({
      {...inputProps}
      className={className}
      error={fieldState.error?.message}
-      onResetIconClick={reset}
+      onResetIconClick={() => reset(defaultValue)}


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?

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

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?

@Tbrid did you get a chance to take a second look at this based on @SayakaOno's feedback

Sorry I was caught up with my own stuff lately, I just did a test with commenting out defaultValue and so initialValue will be using the other params, and reset still works, so I think there isn't an issue here.

Thank you for jumping back in — really appreciate it!

Hope this example helps clarify the issue a bit more.
Here’s a screen recording of the behaviour:

Screen.Recording.2025-04-16.at.9.59.46.AM.mov

In the QuantityApplicationRate component, we're passing 100 as a defaultValue, but the actual value that's used comes from react-hook-form's value (set in the grandparent component) — in this case, it's 80 (field.value in line 64 in this snippet above).

So when resetting, we should restore field.value (80), not 100.

That said, I’m not entirely sure whether it should reset or just clear — the latter makes more sense to me. I’ll check with the team to confirm what’s intended.

For reference, here's the temporary change I made for the demo:

@Tbrid
We discussed the behaviour and confirmed that clicking the clear button should clear the input, not restore the initial value.
Could you please revert the changes to reset for now and use clear instead? 🙏

The reset function still needs to be fixed, so I’ve created a separate bug ticket for it.

…-Error-Entry

SayakaOno · 2025-04-17T21:17:21Z

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

@@ -86,7 +86,7 @@ export default function NumberInput<T extends FieldValues>({
      {...inputProps}
      className={className}
      error={fieldState.error?.message}
-      onResetIconClick={reset}
+      onResetIconClick={() => reset(defaultValue)}


@Tbrid
We discussed the behaviour and confirmed that clicking the clear button should clear the input, not restore the initial value.
Could you please revert the changes to reset for now and use clear instead? 🙏

The reset function still needs to be fixed, so I’ve created a separate bug ticket for it.

SayakaOno · 2025-04-17T21:20:08Z

packages/webapp/src/components/Form/NumberInput/useNumberInput.ts

@@ -199,7 +199,7 @@ export default function useNumberInput({
  return {
    numericValue,
    inputProps,
-    reset: () => update(initialValue ?? NaN),


It would be appreciated if you could add a comment to this line, like: // TODO: Fix before use (LF-4798)

SayakaOno · 2025-04-22T21:37:54Z

packages/webapp/src/components/Animals/AddAnimalsFormCard/AddAnimalsFormCard.tsx

@@ -128,6 +128,7 @@ export default function AddAnimalsFormCard({
          label={t('common:COUNT')}
          className={styles.countInput}
          allowDecimal={false}
+          defaultValue={1}


Thank you for the changes! 🙏
It looks like the default values are already set in animalBasicsDefaultValues in AddAnimalBasics. Is there any other reason we’d need this?

Thank you so much!

LF-4618: fix initialvalue

e18811a

Tbrid requested review from a team as code owners January 13, 2025 18:26

Tbrid requested review from antsgar and Duncan-Brain and removed request for a team January 13, 2025 18:26

LF-4618: Remove console log

3fbbf5d

Duncan-Brain requested changes Jan 17, 2025

View reviewed changes

LF-4618: Use reset value

2ed9bd0

Tbrid requested a review from Duncan-Brain January 20, 2025 17:21

Duncan-Brain previously approved these changes Jan 28, 2025

View reviewed changes

SayakaOno reviewed Jan 28, 2025

View reviewed changes

Merge remote-tracking branch 'origin/integration' into LF-4618-Remove…

395a094

…-Error-Entry

Tbrid requested a review from SayakaOno April 15, 2025 22:49

SayakaOno reviewed Apr 17, 2025

View reviewed changes

LF-4618 : Add TODO and use clear

efffa2e

Tbrid dismissed Duncan-Brain’s stale review via efffa2e April 22, 2025 17:44

LF-4618: Revert package-lock.jsons

a0e7dc3

Tbrid requested review from SayakaOno and Duncan-Brain April 22, 2025 17:57

SayakaOno reviewed Apr 22, 2025

View reviewed changes

LF-4618: Remove unneccessary defaultvalue

20f99ef

Tbrid requested a review from SayakaOno April 26, 2025 17:54

SayakaOno approved these changes Apr 28, 2025

View reviewed changes

Duncan-Brain removed their request for review April 28, 2025 17:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

Tbrid commented Jan 13, 2025

Uh oh!

Duncan-Brain left a comment •

edited

Loading

Uh oh!

Duncan-Brain left a comment

Uh oh!

SayakaOno Jan 28, 2025

Uh oh!

Tbrid Feb 5, 2025

Uh oh!

SayakaOno Feb 5, 2025

Uh oh!

antsgar Mar 28, 2025

Uh oh!

Tbrid Apr 15, 2025

Uh oh!

SayakaOno Apr 16, 2025

Uh oh!

SayakaOno Apr 17, 2025

Uh oh!

SayakaOno Apr 17, 2025

Uh oh!

SayakaOno Apr 17, 2025

Uh oh!

SayakaOno Apr 22, 2025

Uh oh!

Tbrid Apr 26, 2025

Uh oh!

SayakaOno Apr 28, 2025

Uh oh!

Uh oh!

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

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

Tbrid commented Jan 13, 2025

Uh oh!

Duncan-Brain left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Duncan-Brain left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Duncan-Brain left a comment •

edited

Loading