Form FieldWrapper NumericTextBox incorrectly handles min=0

[Noah]

Versions:

@progress/kendo-react-inputs: 9.4.0

@progress/kendo-react-form: 9.4.0

(all @progress dependencies at 9.4.0)

When using NumericTextBox outside of a KendoReact Form FieldWrapper, the min attribute seems to behave as expected. For the following case:

<NumericTextBox label={'Non-Form NumericTextBox Input'} min={0} />

the NumericTextBox blur event seems to set the input value to 0, as expected.

However, when used as part of a form wrapper, as follows:

<Form
    render={(props: FormRenderProps) => {
        return (
            <Field
              name="numericInputField"
              label={'Form NumericTextBox Input'}
              component={FormNumericTextBox}
              min={0}
            />
        );
    }}
/>

export const FormNumericTextBox = (fieldRenderProps: FieldRenderProps) => {
  const {
    validationMessage,
    touched,
    label,
    id,
    valid,
    disabled,
    hint,
    onBlur,
    customProp,
    required,
    onChange,
    min,
    max,
    ...others
  } = fieldRenderProps;

  const showValidationMessage: string | false | null =
    touched && validationMessage;
  const showHint: boolean = !showValidationMessage && hint;
  const hintId: string = showHint ? `${id}_hint` : '';
  const errorId: string = showValidationMessage ? `${id}_error` : '';

  /*
      Temporary workaround.  Kendo React does not remove negative sign when changing input value from negative to zero.
  */
  const customOnChange = (event: NumericTextBoxChangeEvent) => {
    if (min === 0 && event.value && event.value < min) {
      onChange({ ...event, value: 1 });
      onChange({ ...event, value: min });
    } else {
      onChange({ ...event });
    }
  };

  return (
    <FieldWrapper>
      <NumericTextBox
        ariaDescribedBy={`${hintId} ${errorId}`}
        valid={valid}
        id={id}
        disabled={disabled}
        onBlur={customProp?.customOnBlur}
        required={true}
        onChange={onChange}
        min={min}
        max={max}
        label={label}
        {...others}
      />
      {showHint && <Hint id={hintId}>{hint}</Hint>}
      {showValidationMessage && <Error id={errorId}>{validationMessage}</Error>}
    </FieldWrapper>
  );
};

In this case, when we set the value to a negative number, the blur event seems set the value to 0, but the negative sign (-) remains.
For convenient reproduction of this behavior, I have written up the following StackBlitz demo: https://stackblitz.com/edit/react-ts-sy4etxrp

Please let me know whether or not this is a bug, or if we need to do something differently besides using the included customOnChange as a temporary workaround.

[Yanko]

Hello, Noah,

Thank you very much for the provided example. I examined the code and tested it.

The issue was resolved when I removed the declaration of the `onChange` property inside the `FieldWrapper`:

<FieldWrapper>
      <NumericTextBox
        // onChange={onChange}
        ...
      </NumericTextBox>
</FieldWrapper>

I updated the provided example with the mentioned solution:

• https://stackblitz.com/edit/react-ts-32bk9uzj?file=App.tsx 

Please let me know if I can further assist you.

Regards,
Yanko
Progress Telerik

[Noah]

Hello Yanko,
Thank you for your response.  Unfortunately, this does not seem to be a sufficient resolution.  Removing the onChange does indeed correctly remove the negative sign when setting to a min of 0, however, this onChange function from the FieldRenderProps seems to be required to update the form state, and therefore to provide us an accurate submit event.

I was able to confirm this by adding a submit button which executes a console.log, logging the FormSubmitEvent.  When the onChange is present and attached to the input, the event logs with a value.   When it is not present and attached, it does not even log the event.

Please see this example:

https://stackblitz.com/edit/react-ts-1vozlqxa?file=App.tsx

[Yanko]

Hi, Noah,

Thank you for the additional details and example.

To address the issue where the onChange function is necessary for maintaining the form state, along with removing the negative sign, you can use the custom function from the example you initially provided.

The behavior you're experiencing with the negative sign not being removed automatically when the minimum is set to 0 is indeed not the expected behavior. It appears to be a bug. As a workaround, using the custom onChange function should address the issue until a fix is implemented.

I logged this behaviour as an issue in our public GitHub repo, where you can subscribe to get notified when updates are available:

• https://github.com/telerik/kendo-react/issues/2889 

Additionally, I added Telerik Points to your account for bringing this issue to our attention.

Regards,
Yanko
Progress Telerik