JosephusPaye / Keen-UI

A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.
https://josephuspaye.github.io/Keen-UI/
MIT License
4.1k stars 437 forks source link

UiRadio: falsy values not handled properly #467

Closed sagg closed 4 years ago

sagg commented 5 years ago

Hey,

when using falsy values the checked state is sometimes not set correctly. Here is an example, just take a look what the first three options are doing: https://codesandbox.io/embed/vue-template-p1zds

In my case i would need an empty string as value for an option, sadly this option is never getting checked.

Thanks again! :)

sagg commented 5 years ago

Maybe related to or duplicate of https://github.com/JosephusPaye/Keen-UI/issues/465, but i'm not using UiRadioGroup. So maybe in both components is an error.

JosephusPaye commented 5 years ago

Hi,

Yeah this is a similar issue as #465. It's due to the loose equality check here:

https://github.com/JosephusPaye/Keen-UI/blob/e83356772e861fbc73fbe50adfa305eed6c0a240/src/UiRadio.vue#L85

== considers '', false and 0 to be equal.

The fix here I think will be changing it to strict equals (===).

PR welcome! 🙂

sagg commented 5 years ago

First time i've created a PR here on github, hopefully everything is correct. 😅

sagg commented 5 years ago

Example for broken reactivity of UiCheckbox's checked state: https://codesandbox.io/s/keenui-uiradio-with-falsy-values-lgk4z