Send null when backspacing number input #3698
Labels
Comments
navedqb
added a commit
to navedqb/buefy
that referenced
this issue
Mar 21, 2023
amal-qb
added a commit
to qburst/buefy
that referenced
this issue
Mar 21, 2023
number input value fix - buefy#3698
This was referenced Mar 22, 2023
jtommy
pushed a commit
that referenced
this issue
Mar 22, 2023
wesdevpro
added a commit
that referenced
this issue
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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Overview of the problem
Buefy version: [0.9.19]
Vuejs version: [2.6.14]
OS/Browser: Ubuntu 18.04.5 / Chrome 94.0.4606.81
Description
When backspacing on a numberinput, you can remove all text from the input but there is still a value in the input (which is the minimum value for the number input). E.g. you have a number input with
min = 6and a current value of 9. You click backspace once, and this value becomes 6. You click again and the numberinput is now blank, but is passedminand so still holds a value of 6.To a user it looks like they have not filled in this input, but the data is still there. I am using numberinputs on a form, and the validation on the form breaks as it thinks there is a value of 6, even though the input looks blank. I think instead of sending
minas the value when the input has been deleted anullshould be passed, allowing me to distinguish between actual min values and empty values. As it currently stands, when passed a 6 I cannot tell if that came from genuine user interaction or from user backspacing and trying to have a blank input.Steps to reproduce
:min=6andv-model="value"value=9value=6value=6but the input looks likeThe validation on this now appears to work incorrectly from a user's POV. To a user, there's no value in the input, and so it should not pass validation, however in reality we have
value=6still and so the input will pass.Expected behavior
I expect a
nullor similar should be passed when the input is cleared, instead of justmin.I'm not against sending min in the first step, i.e. when backspacing the 9 going to 6 instead of 0 or null or what have you. However I think there's at least a bug where the input stops displaying the value.
Actual behavior
Min was passed, so the value was 6.
The text was updated successfully, but these errors were encountered: