boxType="circle" cannot be unchecked in Android

[cbruce11]

Working in an angular typescript environment I had this html: <CheckBox #CB0 width="14%" name="mon" checked="false" boxType="circle" fillColor="#045ad1" tintColor="#045ad1" lineWidth="2" onCheckColor="white" animationDuration="0.7" onAnimationType="TypeOneStroke" style="margin-left: 2%;"></CheckBox> The boxes worked fine for checking, but did not work for unchecking in Android.

They function properly iOS.

[KirilOkun]

Same in the pure NS app without Angular. Checkbox with type="square" can be checked and unchecked, but with type="circle" it can only be checked the first time after load. After that it cannot be unchecked.

[KirilOkun]

Interestingly setting up another component's (ex. Label) with an onTap event handler that toggles the checkbox selected property works for selection and disselection. But tapping on the checkbox with boxType="circle" only works for selection the first time. Disselection doesn't work.

The workaround is to bind checkbox's selected property to a boolean observable property and then toggle the property from the tap event of the checkbox.

[tjvantoll]

Here’s a concrete test case for this using Vue. All you need to recreate this is to start a new {N}-Vue app with tns create, tns plugin add nativescript-checkbox, and place the following code in your Home.vue file.

<template>
  <Page class="page">
    <StackLayout>

      <CheckBox v-for="(answer, index) in answers" :key="index" :text="answer.option"
        boxType="circle"
        :checked="answer.checked"
        v-on:checkedChange="handleCheckChange(index)" />

    </StackLayout>
  </Page>
</template>

<script>
  export default {
    data() {
    return {
      answers: [
        { id: 0, checked: true, option: "One" },
        { id: 1, checked: false, option: "Two" },
        { id: 2, checked: false, option: "Three" }
      ]
    }
  },
  methods: {
    handleCheckChange(index) {
      for (let x = 0; x < this.answers.length; x++) {
        this.answers[x].checked = false;
      }

      this.answers[index].checked = true;
    }
  }
};
</script>

As @bearoutthere describes, you cannot unselect radio buttons in this example. If you remove the Checkbox component from the equation this code’s logic works fine.

[itsmerockingagain]

@bearoutthere can you give code snippet for your workaround plz

[rbudnar]

@NathanWalker Do you know if this repository is being monitored? It would be nice to have a fix for this issue. If not I can fork and try to come up with a solution.