Let VaDateInput accept a null value

[Bond-Addict]

Allow a user to have a null date input. Dev's will have to handle validation as they normal would with other controls.

Description

Currently you have to provide a date input regardless of whether or not you have any rules. This just allow a user to remove the date inputted and be able to pass the form validation.

const onInputTextChanged = ({ target }: Event) => {
  if (props.disabled) { return }

  const inputValue = (target as HTMLInputElement).value

  if (isValid.value) {
    valueComputed.value = inputValue === '' ? null : parseDateInputValue(inputValue)
  }
}

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

[m0ksem]

I'll need to dig a bit deeper in this issue. This solution makes it visible "Invalid Date" in text field. I'll need to find some references on what to do if there is invalid date. Also, model value should become not null, but props.clearValue.

We also need a story with tests for that.

export const NullValue = () => ({
  components: { VaDateInput },
  data () {
    return {
      value: null,
    }
  },
  template: `
  [[value]]: {{ value === null ? 'null' : value }}
  <VaDateInput v-model="value" clearable manual-input clear-value="null" />
  `,
})

[Bond-Addict]

I'll need to dig a bit deeper in this issue. This solution makes it visible "Invalid Date" in text field. I'll need to find some references on what to do if there is invalid date. Also, model value should become not null, but props.clearValue.

We also need a story with tests for that.

export const NullValue = () => ({
  components: { VaDateInput },
  data () {
    return {
      value: null,
    }
  },
  template: `
  [[value]]: {{ value === null ? 'null' : value }}
  <VaDateInput v-model="value" clearable manual-input clear-value="null" />
  `,
})

If you use the story for manual input, if you click in and then click out or tab out, it no longer throws a validation error. If you do the same but on the story for validation, it will throw the validation error as expected.

[Bond-Addict]

Vuesticnullabledateinput.1.mp4

[m0ksem]

I added demo and fixed the validation issue...

[Bond-Addict]

Ah I see. When you said demo, you meant an actual story for storybook. My bad. As far as the validation error, what error was there? I hadn't noticed anything in my testing.