ORV2-2870 - Regression: Editing year on vehicle will frequently save a random year when saving (#1640)

Co-authored-by: GlenAOT <[email protected]>

Author: glen-aot

frontend/src/common/components/form/CustomFormComponents.tsx

@@ -24,6 +24,8 @@ export interface CustomFormComponentProps<T extends FieldValues> {
   className?: string;
   disabled?: boolean;
   readOnly?: boolean;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onWheel?: (event: React.WheelEvent<HTMLInputElement>) => void;
 }
 
 /**
@@ -91,6 +93,8 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
   className,
   disabled,
   readOnly,
+  onFocus,
+  onWheel,
 }: CustomFormComponentProps<T>): JSX.Element => {
   const {
     control,
@@ -137,6 +141,8 @@ export const CustomFormComponent = <T extends ORBC_FormTypes>({
             inputType={inputType}
             disabled={disabled}
             readOnly={readOnly}
+            onFocus={onFocus}
+            onWheel={onWheel}
           />
         );
       case "textarea":

frontend/src/common/components/form/subFormComponents/CustomOutlinedInput.tsx

@@ -8,6 +8,7 @@ import {
 
 import { ORBC_FormTypes } from "../../../types/common";
 import "./CustomOutlinedInput.scss";
+import React from "react";
 
 /**
  * Properties of the onrouteBC customized OutlineInput MUI component
@@ -21,6 +22,8 @@ export interface CustomOutlinedInputProps<T extends FieldValues> {
   inputType?: "number"; // currently only support number, add "date", "email" and other types later
   disabled?: boolean;
   readOnly?: boolean;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onWheel?: (event: React.WheelEvent<HTMLInputElement>) => void;
 }
 
 /**
@@ -50,8 +53,7 @@ export const CustomOutlinedInput = <T extends ORBC_FormTypes>(
     updatedInputProps["pattern"] = "[0-9]*";
   }
 
-  const customInputClassName = 
-    `custom-input ${props.disabled ? "custom-input--disabled" : ""} ${props.invalid ? "custom-input--invalid" : ""}`;
+  const customInputClassName = `custom-input ${props.disabled ? "custom-input--disabled" : ""} ${props.invalid ? "custom-input--invalid" : ""}`;
 
   return (
     <OutlinedInput
@@ -65,6 +67,8 @@ export const CustomOutlinedInput = <T extends ORBC_FormTypes>(
       readOnly={props.readOnly}
       className={customInputClassName}
       {...register(props.name, props.rules)}
+      onFocus={props.onFocus}
+      onWheel={props.onWheel}
     />
   );
 };

frontend/src/common/helpers/disableMouseWheelInputOnNumberField.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+// Prevent mouse wheel from changing the value on fields where inputType: "number"
+export const disableMouseWheelInputOnNumberField = (
+  event: React.FocusEvent<HTMLInputElement>,
+) => {
+  const { target } = event;
+
+  const handleWheel = (event: WheelEvent) => event.preventDefault();
+
+  target.addEventListener("wheel", handleWheel, {
+    passive: false,
+  });
+
+  target.addEventListener("blur", () =>
+    target.removeEventListener("wheel", handleWheel),
+  );
+};

frontend/src/features/manageVehicles/components/form/PowerUnitForm.tsx

@@ -29,6 +29,7 @@ import {
   invalidYearMin,
   requiredMessage,
 } from "../../../../common/helpers/validationMessages";
+import { disableMouseWheelInputOnNumberField } from "../../../../common/helpers/disableMouseWheelInputOnNumberField";
 
 const FEATURE = "power-unit";
 
@@ -173,6 +174,7 @@ export const PowerUnitForm = ({
           <CustomFormComponent
             type="input"
             feature={FEATURE}
+            onFocus={disableMouseWheelInputOnNumberField}
             options={{
               name: "year",
               rules: {
@@ -242,7 +244,7 @@ export const PowerUnitForm = ({
             )}
             className="power-unit-form__field"
           />
-          
+
           <CountryAndProvince
             feature={FEATURE}
             countryField="countryCode"

frontend/src/features/manageVehicles/components/form/TrailerForm.tsx

@@ -29,6 +29,7 @@ import {
   invalidYearMin,
   requiredMessage,
 } from "../../../../common/helpers/validationMessages";
+import { disableMouseWheelInputOnNumberField } from "../../../../common/helpers/disableMouseWheelInputOnNumberField";
 
 const FEATURE = "trailer";
 
@@ -123,7 +124,7 @@ export const TrailerForm = ({
   const handleClose = () => {
     navigate(VEHICLES_ROUTES.TRAILER_TAB);
   };
-  
+
   const saveButtonText = isEditMode ? "Save" : "Add To Inventory";
 
   return (
@@ -161,6 +162,7 @@ export const TrailerForm = ({
           <CustomFormComponent
             type="input"
             feature={FEATURE}
+            onFocus={disableMouseWheelInputOnNumberField}
             options={{
               name: "year",
               rules: {
@@ -272,7 +274,7 @@ export const TrailerForm = ({
             provinceClassName="trailer-form__field"
           />
         </div>
-        
+
         <Box className="trailer-form__actions">
           <Button
             key="cancel-save-vehicle-button"

frontend/src/features/permits/pages/Application/components/form/VehicleDetails/VehicleDetails.tsx

@@ -23,6 +23,7 @@ import { SelectVehicleDropdown } from "./customFields/SelectVehicleDropdown";
 import { BANNER_MESSAGES } from "../../../../../../../common/constants/bannerMessages";
 import { PermitVehicleDetails } from "../../../../../types/PermitVehicleDetails";
 import { selectedVehicleSubtype } from "../../../../../../manageVehicles/helpers/vehicleSubtypes";
+import { disableMouseWheelInputOnNumberField } from "../../../../../../../common/helpers/disableMouseWheelInputOnNumberField";
 import {
   PowerUnit,
   Trailer,
@@ -283,6 +284,7 @@ export const VehicleDetails = ({
             <CustomFormComponent
               type="input"
               feature={feature}
+              onFocus={disableMouseWheelInputOnNumberField}
               options={{
                 name: "permitData.vehicleDetails.year",
                 rules: {