fix(uptime): Allow typing intermediate values in status code input

[jaydgoss]

Summary

• Fix status code input that was clamping values on every keystroke, making it impossible to type codes like "504"
• Changed from type="number" to type="text" with inputMode="numeric" to allow intermediate values during typing
• Added form-level normalization to handle edge cases like submitting with empty/NaN values

Problem

The onChange handler was running clamping logic on every keystroke. When typing "5" to start "504", it would immediately clamp to 100, making the field unusable.

Additionally, if a user cleared the input and submitted the form (e.g., via ENTER key) before the blur handler fired, NaN values could be sent to the API.

Solution

Input Handling

• Use type="text" with inputMode="numeric" and pattern="[0-9]*" for mobile keyboard support
• Allow any digits during typing (up to 3 characters)
• Clamp to valid range (100-599) immediately when user enters a complete 3-digit code (e.g., "700" → "599")
• Clamp to valid range on blur for partial values (e.g., "50" → "100")
• Reset to default (200) if field is empty on blur

Form Submission Normalization

• Added normalizeAssertion() function in UptimeAssertionsField to ensure valid values at submission time
• Uses getValue prop (not getData) to transform field values - this is important because getData only works for save-on-blur scenarios, while getValue is used by getTransformedData() during full form submission via saveForm()
• Added getValue to FormFieldProps type definition - the prop was already supported by the form model but was missing from the TypeScript interface
• Handles NaN values (defaults to 200) and clamps to valid HTTP range (100-599)
• Centralized in the shared UptimeAssertionsField component so it works for both:
  • Alerts UI (/issues/alerts/new/uptime/)
  • Detectors UI (/monitors/new/settings/?detectorType=uptime_domain_failure)

Detector Form Fix

• Fixed detector form submit hooks (useCreateDetectorFormSubmit, useEditDetectorFormSubmit) to use formModel.getTransformedData() instead of raw data parameter
• The raw data parameter is getData() which bypasses field-level getValue transformations
• This aligns with how the Form component works when no custom onSubmit is provided

Test Plan

• Updated tests to use userEvent instead of deprecated fireEvent
• Added tests for immediate 3-digit clamping behavior
• Added StatefulWrapper for tests that need controlled component state updates
• Added unit tests for normalizeAssertion() function covering NaN handling and recursive normalization
• Added integration tests verifying getValue normalization works via model.getTransformedData() on form submission

Fixes NEW-698

[linear]

NEW-698 status code assertion field is not easily editable in actual UI

[Abdkhan14]

Would this fallback to a default for ''? If not it should to 200 right?

[Abdkhan14]

Otherwise looks good to me

[jaydgoss]

Yeah the fallback to default is actually happening onBlur as opposed to onChange, I wrote it this way to allow the user to completely clear the field (with the delete key), otherwise the onChange clamp would prevent that behavior.

I made a couple additional changes here:

• if value is '' (or NaN) on blur, fallback to 200 (previously was 100 via clamp)
• added comment explaining the fallback logic of the value prop.

[Abdkhan14]

✅

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}