New source found from dndbeyond.com

ddb_main/tools/js/CharacterBuilder/components/AbilityScoreManagerManual/AbilityScoreManagerManual.tsx

@@ -1,9 +1,13 @@
+import { FocusEvent } from "react";
+
 import {
   AbilityManager,
   HelperUtils,
 } from "@dndbeyond/character-rules-engine/es";
-import { FormInputField } from "~/tools/js/Shared/components/common/FormInputField";
 
+import { InputField } from "~/subApps/builder/components/InputField";
+
+import styles from "./styles.module.css";
 
 interface Props {
   abilities: Array<AbilityManager>;
@@ -16,14 +20,19 @@ export default function AbilityScoreManagerManual({
   minScore = 3,
   maxScore = 18,
 }: Props) {
-  const handleTransformValueOnBlur = (value: string): number | null => {
-    const parsedValue = HelperUtils.parseInputInt(value);
+  const handleBlur = (
+    e: FocusEvent<HTMLInputElement>,
+    abilityScore: AbilityManager
+  ) => {
+    // Get the int value from the input
+    const parsedValue = HelperUtils.parseInputInt(e.target.value);
+    // Create a clamped variable to hold the clamped value
     let clampedValue: number | null = null;
-    if (parsedValue !== null) {
+    // If the value is valid, clamp it to the min and max scores
+    if (parsedValue !== null)
       clampedValue = HelperUtils.clampInt(parsedValue, minScore, maxScore);
-    }
-
-    return clampedValue;
+    // Set the score change from the clampped value
+    abilityScore.handleScoreChange(clampedValue);
   };
 
   return (
@@ -35,11 +44,17 @@ export default function AbilityScoreManagerManual({
             key={abilityScore.getId()}
             data-stat-id={abilityScore.getId()}
           >
-            <FormInputField
-              transformValueOnBlur={handleTransformValueOnBlur}
-              onBlur={(value) => abilityScore.handleScoreChange(Number(value))}
+            <InputField
+              className={styles.input}
+              type="number"
               label={abilityScore.getLabel() ?? ""}
               initialValue={abilityScore.getBaseScore()}
+              inputProps={{
+                min: minScore,
+                max: maxScore,
+                autoComplete: "off",
+              }}
+              onBlur={(e) => handleBlur(e, abilityScore)}
             />
             <div className="ability-score-manager-stat-total">
               Total: {abilityScore.getTotalScore() ?? "--"}