The goal is to clarify when form validation is triggered for each inputs and determine which events are emitted by input components.
Here's a comparison between events for native, radix-vue and @nuxt/ui@3 elements:
Input & Textarea
native
@nuxt/ui
input
x
x
change
x
x
blur
x
x
Checkbox & Switch
native
radix-vue
@nuxt/ui
input
x
x
x
change
x
blur
RadioGroup
native
radix-vue
@nuxt/ui
input
x
x
x
change
x
blur
Slider
native
radix-vue
@nuxt/ui
input
x
x
x
change
x
x @valueCommit
x
blur
Select
native
radix-vue
@nuxt/ui
input
x
x
x
change
x
blur
x
x
SelectMenu
radix-vue
@nuxt/ui
input
x
x
change
blur
x
x
InputMenu
radix-vue
@nuxt/ui
input
x
x
change
blur
x
x
There's a difference in how the change event is handled in regular HTML elements versus certain components in radix-vue like Checkbox, Select, and RadioGroup. Since both input and change events act the same for those elements, we can just use the radix-vue way and ditch the change event. Or, we could add these events to @nuxt/ui to match how native components work.
Form validation
Regarding validation with the Form component:
Validation for input occurs as you type. For example, if you're filling in a text field, validation happens automatically as you type each character.
Validation for change occurs when you commit to a value. For Input elements, this means when you click away from the field after typing something.
Validation for blur happens when you click away from a field. So, if you type something in a field and then click anywhere else on the page, validation kicks in.
Approach 1
We choose to emit an input event on top of the change for all components. This seems to be the expected behaviour, but requires to de-duplicate validation events since a lot of components will emit both change and input events at the same time.
input
change
blur
Input
x
x
x
Textarea
x
x
x
Checkbox
x
x
Toggle
x
x
Select
x
x
x
SelectMenu
x
x
x
InputMenu
x
x
x
Slider
x
x
RadioGroup
x
x
Approach 2
The input event is emitted only when there's a notable difference with the change event. This does not require to de-duplicate input events, the downside is that using :validate-on="['input']" won't trigger validation for a lot of components.
The goal is to clarify when form validation is triggered for each inputs and determine which events are emitted by input components.
Here's a comparison between events for
native,radix-vueand@nuxt/ui@3elements:Input&Textareanative@nuxt/uiinputchangeblurCheckbox&Switchnativeradix-vue@nuxt/uiinputchangeblurRadioGroupnativeradix-vue@nuxt/uiinputchangeblurSlidernativeradix-vue@nuxt/uiinputchange@valueCommitblurSelectnativeradix-vue@nuxt/uiinputchangeblurSelectMenuradix-vue@nuxt/uiinputchangeblurInputMenuradix-vue@nuxt/uiinputchangeblurThere's a difference in how the
changeevent is handled in regular HTML elements versus certain components inradix-vuelikeCheckbox,Select, andRadioGroup. Since bothinputandchangeevents act the same for those elements, we can just use theradix-vueway and ditch thechangeevent. Or, we could add these events to@nuxt/uito match how native components work.Form validation
Regarding validation with the
Formcomponent:inputoccurs as you type. For example, if you're filling in a text field, validation happens automatically as you type each character.changeoccurs when you commit to a value. ForInputelements, this means when you click away from the field after typing something.blurhappens when you click away from a field. So, if you type something in a field and then click anywhere else on the page, validation kicks in.Approach 1
We choose to emit an
inputevent on top of thechangefor all components. This seems to be the expected behaviour, but requires to de-duplicate validation events since a lot of components will emit bothchangeandinputevents at the same time.inputchangeblurInputTextareaCheckboxToggleSelectSelectMenuInputMenuSliderRadioGroupApproach 2
The
inputevent is emitted only when there's a notable difference with thechangeevent. This does not require to de-duplicate input events, the downside is that using:validate-on="['input']"won't trigger validation for a lot of components.inputchangeblurInputTextareaCheckboxSwitchSelectSelectMenuInputMenuSliderRadioGroup