i107: Don't error if the user enters a partial date range (#115)

pulibrary · Mar 1, 2024 · 27e1f42 · 27e1f42
1 parent 252e7dc
commit 27e1f42
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/components/LuxDatePicker.vue b/src/components/LuxDatePicker.vue
@@ -245,7 +245,7 @@ function updateInput(value) {
   }
 }
 function updateRangeInput(value) {
-  if (value.includes(" - ")) {
+  if (stringSeemsLikeDateRange(value)) {
     let r = value.split(" - ")
     if (isValidFormat(r[0]) && isValidFormat(r[1])) {
       if (!range.value) {
@@ -268,6 +268,10 @@ function isValidFormat(d) {
   let date_regex = /^\d{1,2}\/\d{1,2}\/\d{4}$/
   return date_regex.test(d)
 }
+
+function stringSeemsLikeDateRange(possibleRange) {
+  return possibleRange.includes(" - ") && !possibleRange.endsWith(" - ")
+}
 </script>
 
 <style lang="scss">

diff --git a/tests/unit/specs/components/luxDatePicker.spec.js b/tests/unit/specs/components/luxDatePicker.spec.js
@@ -79,6 +79,18 @@ describe("LuxDatePicker.vue", () => {
     expect(wrapper.vm.range).toBe(null)
   })
 
+  it("should not update the date range value when the input is a partial date range", async () => {
+    wrapper.setProps({ mode: "range" })
+    await nextTick()
+    expect(wrapper.vm.range).toBe(null)
+
+    wrapper.get("input").setValue("10/22/2023 - ")
+
+    await nextTick()
+    expect(wrapper.vm.range).toBe(null)
+    expect(wrapper.get("input").element.value).toEqual("10/22/2023 - ")
+  })
+
   it("has the expected html structure", () => {
     expect(wrapper.element).toMatchSnapshot()
   })