Riot: Class does not remove when value becomes false

[syuilo]

Help us to manage our issues by answering the following:

Describe your issue:

Class does not remove when value becomes false.

I think that behavior is against the explanation: A shorthand syntax for class names is available: class={ completed: done } renders to class="completed"when the value of done is a true value..

This bug(?) only encounter on v3.0.0.

For details, please refer to the examples below.

Can you reproduce the issue?

Yes, Compare behaviors:

3.0.0:
http://jsfiddle.net/wf7bkvur/128/

2.x:
http://jsfiddle.net/wf7bkvur/127/

Which version of Riot does it affect?

v3.0.0

How would you tag this issue?

• [ ] Question
• [x] Bug
• [ ] Discussion
• [ ] Feature request
• [ ] Tip
• [ ] Enhancement
• [ ] Performance

---

Thanks, Great lib! ❤️ cheers 🍺

[YoussefKababe]

I confirm! Also doing something like this won't remove the class when it's false:

class={ done ? 'completed' : '' }

I ended up doing this while waiting for it to be fixed, and it works:

class={ done ? 'completed' : 'incomplete' }

[fabien]

Here's another 'workaround':

<p class={ active: isActive, foo: true }>Riot{ isActive ? '.js' : '' }</p>

Note the additional attribute - if I set foo: false it stops working again. Definitely a bug.

Another 'workaround' which might help uncover the cause if this:

<p class=" { active: isActive }">Riot{ isActive ? '.js' : '' }</p> (a space inserted)

[believer-ufa]

Hello. I think we need to have all keys from expression in update.js component to easy update DOM element classes. Because now you have this code:

if (value === 0 || value && typeof value !== T_OBJECT)
  setAttr(dom, attrName, value)

If value is empty, Riot.js will dont delete exists classes.

If think you must add after it something like this:

if (attrName === 'class') {
  // Add or remove classes, based on current expr keys and final value
}

Maybe, through classList api? Or through something like this methods?

You already have values. Main problem now is get all keys from expression. Maybe create in riot-tmpl something like getKeys method? And use it in this place?

---

Or just add remAttr function call if value is empty?

if (value === 0 || value && typeof value !== T_OBJECT)
  setAttr(dom, attrName, value)
else
  remAttr(dom, attrName)

This approach fixes this issue too.