Checked class not set on checklist

[aoudijk]

A checked attribute is set on the second item in the checklist. What goes wrong is:

• Class 'checked' is not initially set
• Class 'checked' only appears on the second label if the first items has been selected at least once
• Class 'checked' is never set on the input, only on the label (not the core of this issue)

The problem does not seem to occur if the first item in the list is initially selected. Test case: http://f343rn9a.informaat.com/test.html

Oddly, with the exact same HTML code and the same .js package, the problem does not seem to occur at:

http://jsfiddle.net/#&togetherjs=a7h0ctMxb4

Where is the error? Anything we're overlooking?

[jcbrand]

There are two patterns at play here.

pat-checklist which you explicitly specified, and pat-checkedflag which is triggered automatically.

From the documentation:

• pat-checklist "provides a convenient method to add options to select and deselect all checkboxes in a block".
• pat-checkedflag "automatically [adds] a checked or unchecked class to labels and fieldset[s]".

Class 'checked' is not initially set

On the element? I guess this could be added to pat-checkedflag. I'm wondering why it wasn't added originally, perhaps there's a reason for that?

• Class 'checked' only appears on the second label if the first items has been selected at least once

pat-checkedflag is supposed to do this. I tested this locally and it worked fine, but I can see in your case in the link you posted to test.html that it doesn't work.

However, I can't debug it because you're using a minified version of patternslib. Can you please change http://f343rn9a.informaat.com/test.html to use an un-minified version of the bundle?

• Class 'checked' is never set on the input, only on the label (not the core of this issue)

This is the documented behavior of pat-checkedflag.

The problem does not seem to occur if the first item in the list is initially selected. Test case: http://f343rn9a.informaat.com/test.html

As mentioned above, this works for me locally. Can you please use the un-minified bundle there, then I can try to debug for you.

Oddly, with the exact same HTML code and the same .js package, the problem does not seem to occur at: http://jsfiddle.net/#&togetherjs=a7h0ctMxb4

Yes, it also doesn't occur for me locally.

[cornae]

Might I — apart from this issue, but slightly related — suggest to merge pat-checked-flag into pat-checklist? I think pat-checked-flag should never have been a pattern as it doesn't represent any interaction pattern. Merely a coding feature. If it's part of pat-checklist — which is an actual interaction pattern — then it's also better to understand for the designer who wants to use checklists. Or are there any disadvantages to that i'm overlooking?

Op 26 nov. 2014, om 12:33 heeft JC Brand notifications@github.com het volgende geschreven:

There are two patterns at play here.

pat-checklist which you explicitly specified, and pat-checkedflag which is triggered automatically.

From the documentation:

pat-checklist "provides a convenient method to add options to select and deselect all checkboxes in a block".
pat-checkedflag "automatically [adds] a checked or unchecked class to labels and fieldset[s]".
Class 'checked' is not initially set

On the element? I guess this could be added to pat-checkedflag. I'm wondering why it wasn't added originally, perhaps there's a reason for that?

Class 'checked' only appears on the second label if the first items has been selected at least once
pat-checkedflag is supposed to do this. I tested this locally and it worked fine, but I can see in your case in the link you posted to test.html that it doesn't work.

However, I can't debug it because you're using a minified version of patternslib. Can you please change http://f343rn9a.informaat.com/test.html http://f343rn9a.informaat.com/test.html to use an un-minified version of the bundle?

Class 'checked' is never set on the input, only on the label (not the core of this issue)
This is the documented behavior of pat-checkedflag.

The problem does not seem to occur if the first item in the list is initially selected. Test case: http://f343rn9a.informaat.com/test.html http://f343rn9a.informaat.com/test.html
As mentioned above, this works for me locally. Can you please use the un-minified bundle there, then I can try to debug for you.

Oddly, with the exact same HTML code and the same .js package, the problem does not seem to occur at: http://jsfiddle.net/#&togetherjs=a7h0ctMxb4 http://jsfiddle.net/#&togetherjs=a7h0ctMxb4
Yes, it also doesn't occur for me locally.

—
Reply to this email directly or view it on GitHub #381 (comment).

[wichert]

-1

I very often rely on pat-checked-flag, but almost never want to use checklist. I really want to be able to use checkedflag without having to include the checklist code.

[cornae]

Then there's a probably a conflict of interest between dev and des. I think it's worth looking in an alternative solution that makes both sides happy as I find violates the core principle of the Patterns library that it is a library of (interaction) Patterns. Any suggestion for an alternative?

[cornae]

@jcbrand, On that side issue of the class on the input: Here's a sequence of what happens with the dynamically set classes in the inspector. As you can see there are 'unchecked' classes set on the input, that are not present in the source markup. But they're never set to 'checked'.

Initial state:

After having clicked on 'man':

After having clicked on 'vrouw':

[wichert]

Personally I can’t see the conflict. I see checked-flag as a design pattern which allows me to apply styling that would not be possible otherwise. That makes it a proper pattern to me, just as much as a grid or form markup&styling could be a pattern. And checked flag is much more about interaction than those since it reacts to a user interacting with a form, so I would even be willing to argue it is an interaction pattern.

You can make checklist depend on checked-flag so it pulls that in automatically, but I insist on being able make a build that only has checked flag and no trace of checklist.=

[cornae]

An interaction something conceived or treated — whether conscious or subconscious — by a user as a pattern. This is a class. A class is code and invisible to the user and therefor not an interaction pattern from a UX Design perspective. Not that I want to be overly academic or religious about that, exceptions and concessions always apply — but I find it important to explain my point of view well. Having said that, what comes closest to an interaction pattern however small it may be, is the pattern 'Checkbox'. Renaming it to Checkbox would already make it a lot more clear. (believe me, checked flag is one of the Patterns that people very often immediately ask 'what is it?' if I demonstrate the lib).

[cornae]

@jcbrand , Now changed it to unminified:

[fulv]

I should have checked the current pat-checkedflag, instead of the patterns.js file referenced in these demos. The issue was fixed already. Live and learn.

@cornae, if you can get a more current patterns.js file, you will see that it works now.

[fulv]

@cornae I've uploaded your example with the current patterns bundle here:
http://patternslib.s3-website.eu-central-1.amazonaws.com/

[jcbrand]

This is fixed, right? Closing...