diff --git a/app/javascript/dashboard/components-next/input/DurationInput.vue b/app/javascript/dashboard/components-next/input/DurationInput.vue
index b0597648a..7b82373f5 100644
--- a/app/javascript/dashboard/components-next/input/DurationInput.vue
+++ b/app/javascript/dashboard/components-next/input/DurationInput.vue
@@ -46,12 +46,16 @@ const transformedValue = computed({
       duration.value = null;
       return;
     }
-    let minuteValue = convertToMinutes(newValue);
-
-    duration.value = Math.min(Math.max(minuteValue, props.min), props.max);
+    duration.value = convertToMinutes(newValue);
   },
 });
 
+const normalizeDuration = () => {
+  if (duration.value == null) return;
+
+  duration.value = Math.min(Math.max(duration.value, props.min), props.max);
+};
+
 // when unit is changed set the nearest value to that unit
 // so if the minute is set to 900, and the user changes the unit to "days"
 // the transformed value will show 0, but the real value will still be 900
@@ -72,6 +76,8 @@ watch(unit, () => {
     :disabled="disabled"
     :placeholder="t('DURATION_INPUT.PLACEHOLDER')"
     class="flex-grow w-full disabled:"
+    @blur="normalizeDuration"
+    @keydown.enter="normalizeDuration"
   />
   <select
     v-model="unit"
diff --git a/app/javascript/dashboard/components-next/input/specs/DurationInput.spec.js b/app/javascript/dashboard/components-next/input/specs/DurationInput.spec.js
new file mode 100644
index 000000000..c6134ec35
--- /dev/null
+++ b/app/javascript/dashboard/components-next/input/specs/DurationInput.spec.js
@@ -0,0 +1,76 @@
+import { defineComponent, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import DurationInput from '../DurationInput.vue';
+
+const mountDurationInput = ({ initialValue = null } = {}) => {
+  const TestHost = defineComponent({
+    components: { DurationInput },
+    setup() {
+      const duration = ref(initialValue);
+      const unit = ref('minutes');
+      const submittedDuration = ref(null);
+
+      const handleSubmit = () => {
+        submittedDuration.value = duration.value;
+      };
+
+      return { duration, unit, submittedDuration, handleSubmit };
+    },
+    template: `
+      <form @submit.prevent="handleSubmit">
+        <DurationInput
+          v-model="duration"
+          v-model:unit="unit"
+          :min="10"
+          :max="100"
+        />
+        <output data-testid="duration">{{ duration }}</output>
+        <output data-testid="submitted-duration">
+          {{ submittedDuration }}
+        </output>
+      </form>
+    `,
+  });
+
+  return mount(TestHost);
+};
+
+describe('DurationInput', () => {
+  it('allows a multi-digit value to be typed before enforcing the minimum', async () => {
+    const wrapper = mountDurationInput();
+    const input = wrapper.get('input');
+
+    await input.setValue('4');
+    expect(input.element.value).toBe('4');
+
+    await input.setValue(`${input.element.value}5`);
+    expect(input.element.value).toBe('45');
+    expect(wrapper.get('[data-testid="duration"]').text()).toBe('45');
+  });
+
+  it('normalizes values to the configured range on blur', async () => {
+    const wrapper = mountDurationInput();
+    const input = wrapper.get('input');
+
+    await input.setValue('4');
+    await input.trigger('blur');
+    expect(input.element.value).toBe('10');
+
+    await input.setValue('125');
+    await input.trigger('blur');
+    expect(input.element.value).toBe('100');
+  });
+
+  it('normalizes the value before Enter submits the form', async () => {
+    const wrapper = mountDurationInput();
+    const input = wrapper.get('input');
+
+    await input.setValue('125');
+    await input.trigger('keydown', { key: 'Enter' });
+    await wrapper.get('form').trigger('submit');
+
+    expect(wrapper.get('[data-testid="submitted-duration"]').text()).toBe(
+      '100'
+    );
+  });
+});