Fix: Validation error on Input not reset by programmatically correcting the value (#3884) #3886
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Fixes the bug that `Input` did not validate an updated value if `value` prop was updated from outside; i.e., without user interaction. Runs validation whenever `value` is changed from outside. It determines the update is from outside if `computedValue` and the new value are different. Intentionally uses `!=` instead of `!==`, because `computedValue` and `value` may be either string or number.
- Introduces new test cases for `Input` that test validation runs on
relevant events:
- "input" event
- "change" event
- `value` prop is programmatically changed
Also tests cases where the `Input` value has v-model binding. These
tests make sure that the chain of events won't run validation twice on
the same value.
wesdevpro
approved these changes
Sep 13, 2023
wesdevpro
added a commit
that referenced
this pull request
Sep 22, 2023
* Added mobileModal to Clockpicker Component (#3840) * Added mobileModal to Clockpicker Component * Added mobileModal to Timepicker Component * Input-id prop checkbox * feat: 🎸 Adding a new prop to set the id for inner input Adding a new prop to set the id for inner input for checkbox component * docs: ✏️ Adding helping data on checkbox api file * refactor: 💡 Changing prop name * Fix: Logo not displaying in the Sidebar documentation (#3838) (#3839) * Fix: Disabled radio button has cursor 'pointer' (#3826) * Fix: Sidebar image not displaying in the documentation (#3838) * Fix: Expired and broken websites in expo page (#3780) (#3845) * Number input null issue fix - #3698 (#3847) * number input value fix - #3698 * checks fix --------- Co-authored-by: Amal Mathew <122610766+amal-qb@users.noreply.github.com> * Numberinput: fix long-press breaking when disabled (#3860) * Numberinput: fix long-press breaking when disabled * Numberinput: fix long-press unit test * Update notification.js (#3867) Updated documentation for attribute `auto-close` from #3855 * Fix: Full width sidebar doesn't have a close button (#3802) (#3856) * Fix: Expired and broken websites in expo page (#3780) * Fix: Full width sidebar doesn't have a close button (#3802) * Fix: Full width sidebar doesn't have a close button (#3802) - format code * Fix: Full width sidebar doesn't have a close button (#3802) - Add documentation * fix: infinite loop on Datepicker (#3877) - Fixes the bug that `Datepicker` ended up with an infinite loop when a user tried to move focus onto an unselectable cell. * Bump Version From v0.9.23 to v0.9.24 * Fix: Validation error on Input not reset by programmatically correcting the value (#3884) (#3886) * fix(lib): Input not validate on value prop change - Fixes the bug that `Input` did not validate an updated value if `value` prop was updated from outside; i.e., without user interaction. Runs validation whenever `value` is changed from outside. It determines the update is from outside if `computedValue` and the new value are different. Intentionally uses `!=` instead of `!==`, because `computedValue` and `value` may be either string or number. * test(lib): test validation on Input - Introduces new test cases for `Input` that test validation runs on relevant events: - "input" event - "change" event - `value` prop is programmatically changed Also tests cases where the `Input` value has v-model binding. These tests make sure that the chain of events won't run validation twice on the same value. * Fix: Validation error on Field with multiple child components (addons) persists after value is corrected (#3883) (#3885) * fix(lib): validation error on addons persisted - Fixes the bug that a validation error on a `Field` that wraps multile child components (has addons) persisted. `Field` wraps its slot in another `Field` (wrapper) if the slot is consisting of multiple components. It used to propagate `newType` to the wrapper, but this prevented the type of the wrapper updated once `newType` was set due to the line: https://github.com/buefy/buefy/blob/6f41e91bd24dfef8f680f27313e07b488ddcfc1d/src/utils/FormElementMixin.js#L137 Propagates `type` instead of `newType` to the wrapper. * test(lib): add test for Field's type - Adds a new test case for `Field` that tests if `Field` containing multiple components (addons) reflects the validation status of a wrapped input. This verifies the fix of the bug that `Field` with addons did not update its validation status (`newType`) once it was set. * Add nearbyMonthDays prop support to Datetimepicker (#3881) * Add nearbyMonthDays prop support to Datetimepicker Add Datepicker component prop `nearby-month-days` to Datetimepicker component * FIX lint Datetimepicker.vue * Use Datepicker default behavior for nearbyMonthDays prop * Update datetimepicker api doc with nearbyMonthDays prop * Update Twitter and Sponsor Links (#3888) * Updated The Documentation's Twitter Link * Updated Sponsor Links * Update FUNDING.yml * Update Package Json * Add Workflow to Publish Buefy on PR to Master --------- Co-authored-by: julzELO <73643910+julzELO@users.noreply.github.com> Co-authored-by: Aarón J. Montes <32050436+ajomuch92@users.noreply.github.com> Co-authored-by: Amal Mathew <122610766+amal-qb@users.noreply.github.com> Co-authored-by: navedqb <109583873+navedqb@users.noreply.github.com> Co-authored-by: Sylvain Marty <10723351+SylvainMarty@users.noreply.github.com> Co-authored-by: Kikuo Emoto <kemoto@codemonger.io> Co-authored-by: Guillaume Mercey <guillaume.mercey@gmail.com>
64 tasks
kikuomax
added a commit
to kikuomax/buefy
that referenced
this pull request
Jan 10, 2024
…ng the value (buefy#3884) (buefy#3886) * fix(lib): Input not validate on value prop change - Fixes the bug that `Input` did not validate an updated value if `modelValue` prop was updated from outside; i.e., without user interaction. Runs validation whenever `modelValue` is changed from outside. It determines the update is from outside if `computedValue` and the new value are different. Intentionally uses `!=` instead of `!==`, because `computedValue` and `modelValue` may be either string or number. * test(lib): test validation on Input - Introduces new test cases for `Input` that test validation runs on relevant events: - "input" event - "change" event - `modelValue` prop is programmatically changed Also test cases where the `Input` value has v-model binding. These tests make sure that the chain of events won't run validation twice on the same value. - Includes migration to Vue 3 and Vue Test Utils v2: - `value` → `modelValue` - `find` → `findComponent`
kikuomax
added a commit
to kikuomax/buefy
that referenced
this pull request
Feb 11, 2024
…ng the value (buefy#3884) (buefy#3886) * fix(lib): Input not validate on value prop change - Fixes the bug that `Input` did not validate an updated value if `modelValue` prop was updated from outside; i.e., without user interaction. Runs validation whenever `modelValue` is changed from outside. It determines the update is from outside if `computedValue` and the new value are different. Intentionally uses `!=` instead of `!==`, because `computedValue` and `modelValue` may be either string or number. * test(lib): test validation on Input - Introduces new test cases for `Input` that test validation runs on relevant events: - "input" event - "change" event - `modelValue` prop is programmatically changed Also test cases where the `Input` value has v-model binding. These tests make sure that the chain of events won't run validation twice on the same value. - Includes migration to Vue 3 and Vue Test Utils v2: - `value` → `modelValue` - `find` → `findComponent`
kikuomax
added a commit
to ntohq/buefy-next
that referenced
this pull request
Feb 12, 2024
…ng the value (buefy#3884) (buefy#3886) * fix(lib): Input not validate on value prop change - Fixes the bug that `Input` did not validate an updated value if `modelValue` prop was updated from outside; i.e., without user interaction. Runs validation whenever `modelValue` is changed from outside. It determines the update is from outside if `computedValue` and the new value are different. Intentionally uses `!=` instead of `!==`, because `computedValue` and `modelValue` may be either string or number. * test(lib): test validation on Input - Introduces new test cases for `Input` that test validation runs on relevant events: - "input" event - "change" event - `modelValue` prop is programmatically changed Also test cases where the `Input` value has v-model binding. These tests make sure that the chain of events won't run validation twice on the same value. - Includes migration to Vue 3 and Vue Test Utils v2: - `value` → `modelValue` - `find` → `findComponent`
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #3884
Proposed Changes
valueprop is changed.computedValue != value