Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Validation error on Field with multiple child components (addons) persists after value is corrected #3883

Closed
kikuomax opened this issue Sep 13, 2023 · 1 comment · Fixed by #3885
Closed

Validation error on Field with multiple child components (addons) persists after value is corrected #3883

kikuomax opened this issue Sep 13, 2023 · 1 comment · Fixed by #3885
Assignees
@kikuomax
Labels
bug

Comments

@kikuomax
Copy link
Collaborator

Overview of the problem

Buefy version: 0.9.23
Vuejs version: 2.7.14
OS/Browser: Safari,Chrome,FireFox/macOS

Description

Originally posted by @glumb in #3752 (comment)

If a value is entered once that is outside the range, the notification does not go away even if numbers are input in the valid range.

image

Steps to reproduce

 <b-field>
    <b-input
      v-model.number="enteredValue"
      type="number"
      :min="100"
      :step="100"
      :max="900" />
    <p class="control">
      <span class="button is-static">{{ name }}</span>
    </p>
    <p  class="control">
      <b-button title="reset value" icon-left="undo" @click="onClickReset" />
    </p>
  </b-field>
  1. Enter a value outside the range; e.g., 1
  2. Enter another value within the range; e.g., 600

Expected behavior

The notification goes away after a valid value is inputted.

Actual behavior

The notification does not go away after a valid value is inputted.
@kikuomax kikuomax added the bug label Sep 13, 2023
@kikuomax kikuomax self-assigned this Sep 13, 2023
This was referenced Sep 13, 2023
Closed
Merged
Closed
wesdevpro pushed a commit that referenced this issue Sep 13, 2023
@kikuomax
Fix: Validation error on Field with multiple child components (addons…
e2e4a7d 
…) 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.
@glumb
Copy link

glumb commented Sep 22, 2023

when is a new release planned that includes this fix? 🙂

wesdevpro added a commit that referenced this issue Sep 22, 2023
@wesdevpro @julzELO
@ajomuch92 @amal-qb @navedqb @SylvainMarty @kikuomax @gmercey
v0.9.24 (#3878)
1c273aa 
* 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>
@kikuomax kikuomax mentioned this issue Jan 4, 2024
Closed
64 tasks
kikuomax added a commit to kikuomax/buefy that referenced this issue Jan 10, 2024
@kikuomax
Fix: Validation error on Field with multiple child components (addons…
6448245 
…) persists after value is corrected (buefy#3883) (buefy#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.

- Includes migration to Vue Test Utils v2 and fixes:
    - `find` → `findComponent`
    - Inserts an extra `$nextTick` await after `setInvalid` and
      `setValidity`, because `setInvalid` and `setValidity` take effect
      on the first `$nextTick`
kikuomax added a commit to kikuomax/buefy that referenced this issue Feb 11, 2024
@kikuomax
Fix: Validation error on Field with multiple child components (addons…
2624eed 
…) persists after value is corrected (buefy#3883) (buefy#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.

- Includes migration to Vue Test Utils v2 and fixes:
    - `find` → `findComponent`
    - Inserts an extra `$nextTick` await after `setInvalid` and
      `setValidity`, because `setInvalid` and `setValidity` take effect
      on the first `$nextTick`
kikuomax added a commit to ntohq/buefy-next that referenced this issue Feb 12, 2024
@kikuomax
Fix: Validation error on Field with multiple child components (addons…
c67e6db 
…) persists after value is corrected (buefy#3883) (buefy#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.

- Includes migration to Vue Test Utils v2 and fixes:
    - `find` → `findComponent`
    - Inserts an extra `$nextTick` await after `setInvalid` and
      `setValidity`, because `setInvalid` and `setValidity` take effect
      on the first `$nextTick`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kikuomax kikuomax

Labels
bug
Projects
None yet
Milestone
No milestone
2 participants
@glumb @kikuomax