Feature Request: Option to get rid of Checkbox intermediate state or change toggle order

[KnowZero]

Quasar: 0.15-0.16

It would be nice to have the option of completely removing the intermediate state in checkboxes or maybe set the toggle order of states.

I know I can set the 'data' to the false-value or true-value but that isn't very convenient when working with dynamic forms.

Even if I set something like indeterminate-value="none" and don't specify a false-value, it still picks the indeterminate-value. (Even though it should technically pick the false value since that is null and not the intermediate value)

I would be able to get around this if I just change the indeterminate-icon="check_box_outline_blank", but then the user has to click twice to turn it on since I can't control the toggle order.

So the only way I can achieve close to the needed functionality is to flip everything around:
false-value="yes" indeterminate-icon="check_box_outline_blank" unchecked-icon="check_box" checked-icon="check_box_outline_blank" keep-color

But having false-value as the true value isn't a very clean solution.

https://jsfiddle.net/wso1av4f/5/

[rstoenescu]

Hi,

Maybe I'm missing some point, but are you aware of the Boolean toggle-indeterminate prop? If you don't want the indeterminate state, just set it to Boolean "false"..

[KnowZero]

@rstoenescu How do I do that? I tried

toggle-indeterminate="false", :toggle-indeterminate="false" and v-bind:toggle-indeterminate="false" and they don't seem to work. Am I doing something wrong?

[KnowZero]

@rstoenescu From my understanding, toggle-indeterminate is false by default. But even if it is false by default, it still exists until user clicks once. But there should be an option to completely eliminate it. Look at my jsfiddle, the last checkbox is what I would like:

https://jsfiddle.net/wso1av4f/5/

With true toggle-indeterminate:

(start) indeterminate state-> (user clicks) -> false state-> (user clicks)-> true state-> (user clicks)->indeterminate state

With false toggle-indeterminate:

(start) indeterminate state-> (user clicks) -> false state-> (user clicks)-> true state-> (user clicks)->false state

My goal:
(start) false state-> (user clicks)-> true state-> (user clicks)->false state

Aka, the intermediate state exists regardless of if it is true or false. The only way to completely get rid of intermediate state is by setting the v-model date to equal to true-value or false-value. But I would like to get rid of the intermediate state while having a null v-model value in data. Or at least ability to control the toggle order.

[donvie]

@KnowZero have you fix may i know the solutions thanks

[smolinari]

The solution is to preset your model with the value you want it toggled to. Simple enough, especially since you need the model anyway to "store" the value.

I am not understanding the "dynamic" forms or "toggle order" bits (either). So, maybe that is where we are missing the point. Can you explain the use case / wish better please?

Scott

[gaby64]

I do need a null-is-false prop

[rstoenescu]

@gaby64 :false-value="null" indeterminate-value="something-else"

[gaby64]

I have tried that, they are indeterminate on render

[rstoenescu]

Works fine: https://codepen.io/rstoenescu/pen/YzPJYdv?editable=true&editors=101
Correct the initial value of the model... @gaby64

[gaby64]

undefined is my correct inital value for a property in an object array in a v-for, item.selected

this is the case for which it was not working

[gaby64]

https://codepen.io/gaby64/pen/YzPREwm?editable=true&editors=101

the only change required to make it work is

checkbox.js

props: {
    value: {
      required: true,
      default: null
    }

[smolinari]

Undefined isn't a proper value. It isn't a value. You aren't saving undefined in your database, are you?

Scott

[gaby64]

Undefined isn't a proper value. It isn't a value. You aren't saving undefined in your database, are you?

Scott

no

the point is its a temporary value, only used to mark the items as selected

once the chekbox is clicked, item.selected is a valid observable property.

in any case my proposed fix makes the default null, so undefined becomes null, perfectly valid, breaks nothing

[smolinari]

the point is its a temporary value, only used to mark the items as selected

But, undefined won't mark the items selected and it makes no sense to do so. (unselected either). If is a case of needing to "preset" the value, you could just fill your data with a proper checked or unchecked value.

Scott

[gaby64]

the point is its a temporary value, only used to mark the items as selected

But, undefined won't mark the items selected and it makes no sense to do so. (unselected either). If is a case of needing to "preset" the value, you could just fill your data with a proper checked or unchecked value.

Scott

true defines them as selected, undefined is not selected
you may want to waste cycles on such things when the answer is easily what I proposed and this works in other ui frameworks

its not part of the data, never will be, do you understand how someone might want to just have list items with chekboxes for an interface function and not have to pollute the data with presets that may not even be used?

[smolinari]

I digress. We obviously have differing points of view on how to set up this component and its state.

Scott

[leosdad]

Just guessing, but maybe the OP wanted the same as I do when mentioning a "toggle order". The current toggle cycle is indeterminate --> unckecked --> checked. It would be very nice to have an option to invert the cycle, i.e. indeterminate --> checked --> unckecked.

Motivation: when the checkbox default state is indeterminate, clicking it once would check the option instead of unchecking it, which would arguably feel more natural to users.

[rstoenescu]

Toggle order available in v1.12

[leosdad]

Yes, thank you! A much welcome change.

[leosdad]

I need any falsy value (false, null, zero, undefined) to be displayed as unckecked. This is a common requisite when working with JSON data. Let's say I have three checkboxes that are bound to 3 variables, and one of them is omitted:

{
  "var1": false,
  // var2 is omitted
  "var3": null,
}

In this example I'd like all 3 values to show up as unckecked. Is this currently possible? Thanks.

[leosdad]

I've just created a component like this:

Vue.component('MyCheckbox',
{
  template: `
    <q-checkbox
      :value="!!$attrs.value"
      v-bind="$attrs"
      v-on="$listeners"
      />
  `
});

This kinda does what I want, but I'm not sure this is the best answer.

[Flamenco]

I ran into this issue because I needed a quick way to reset my state. The problem is in the implementation of v-model for the checkbox. I also did not want to persist a bunch of false values when there were no items selected.

So I solved it by going old-school and using :modelValue, @update:modelValue, and converting a falsey value to a boolean.

const multiSelectedItems = ref({})

function clearSelection() {
multiSelectedItems.value = {}
}

And in the template

<q-checkbox
  :model-value="!!multiSelectedItems[id]"
  @update:model-value="multiSelectedItems[item.id]=!multiSelectedItems[id]"
/>