Issue #12 - [BUG] Scheduler dropdown doesn't update when typing custom cron expression

[rogelio-cmj]

Motivation

The dropdown continues to show the previously selected preset even though the input field contains different text. This creates confusion about which schedule is actually active and makes the interface feel unresponsive. Fixing this will improve the user experience by keeping the dropdown and input field synchronized, clearly indicating when a custom expression is being used.

Current Behavior

The scheduler form has a dropdown with predefined cron expressions and a text input for custom expressions. However, these two controls don't communicate with each other properly. When a user selects a preset from the dropdown and then types a different expression in the input field, the dropdown remains stuck on the previously selected preset instead of updating to reflect that a custom expression is now being used.

Reproduction Steps:

1. Navigate to any scheduler configuration form (application schedules, database backups, or volume backups)
2. Click the dropdown and select a predefined schedule (e.g., "Every day at midnight (0 0 * * *)")
3. Click into the custom cron expression input field below the dropdown
4. Type a different cron expression (e.g., "*/5 * * * *")
5. Observe: The dropdown still shows "Every day at midnight" even though the input field contains a completely different expression
6. Expected: The dropdown should automatically switch to show "Custom" when the typed expression doesn't match any preset

Expected Behavior

The scheduler form should intelligently synchronize the dropdown selection with the input field value. When a user types a cron expression that matches a predefined option, the dropdown should automatically select that preset. When the user types an expression that doesn't match any preset, the dropdown should automatically switch to a "Custom" option. This creates a cohesive experience where both controls always reflect the current state accurately.

Acceptance Criteria:

• A "Custom" option is added to the scheduler dropdown list
• When typing in the input field, if the expression matches a predefined option, the dropdown automatically selects that option
• When typing in the input field, if the expression doesn't match any predefined option, the dropdown automatically selects "Custom"
• The same scheduler component is reused across all forms (application schedules, database backups, volume backups)
• Selecting a preset from the dropdown still populates the input field correctly

Steps To Test

1. Open the application schedules form and test the scheduler field:

   • Select "Every hour" from the dropdown, verify the input shows "0 * * * *"
   • Type "0 * * * *" manually in the input, verify the dropdown switches to "Every hour"
   • Type "*/7 * * * *" in the input, verify the dropdown switches to "Custom"
   • Select "Every day at midnight" from dropdown, verify input updates to "0 0 * * *"

2. Navigate to the database backups form and repeat the same tests to confirm the component works consistently across different forms

3. Navigate to the volume backups form and repeat the same tests to verify the reusable component is properly integrated

4. Verify edge cases:

   • Clear the input field completely, check that the form validation still works
   • Type partial expressions, ensure the dropdown behavior is appropriate

Submission

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx