-
Notifications
You must be signed in to change notification settings - Fork 324
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Let VaDateInput accept a null value #4169
Conversation
…dation as they normal would with other controlls.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
Vuesticnullabledateinput.1.mp4 |
I added demo and fixed the validation issue... |
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. |
@@ -239,7 +239,7 @@ const modelValueToString = (value: DateInputModelValue): string => { | |||
return '' | |||
} | |||
|
|||
throw new Error('VaDatePicker: Invalid model value. Value should be Date, Date[] or { start: Date, end: Date | null }, got ' + typeof value) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was an error, because by default clearValue is empty string. ''
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah okay gotcha. Thanks for the explanation and the fix!
* fix: tab animation when link * fix(tabs): what for router link changes * feat(data-table): add no-data slot * fix(counter/#4281): disable button in readonly VaCounter * fix(file-upload/#4282): add file incorrect i18n key * Fixed scoped class on modal (#4274) * Try to resolve $t from vue global properties (#4244) (#4256) * Try to resolve $t from vue global properties #4244 * fix(docs/i18n): move back vuestic key in example * docs(i18n): remove extra steps in vue-i18n --------- Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com> * Let VaDateInput accept a null value (#4169) * Allow a user to have a null date input. Devs will have to handle validation as they normal would with other controlls. * Updated to use props.clearValue and merged develop back in * fix(date-input): allow null value --------- Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com> * fix(i18n): use custom values when translating props * fix(data-table/story): fix correct no filter data story * Fixed code audit modal on mobile --------- Co-authored-by: Maksim Nedoshev <m0ksem1337@gmail.com> Co-authored-by: Bond-Addict <117455332+Bond-Addict@users.noreply.github.com>
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.
Types of changes