Class does not remove when value becomes false #2082

syuilo opened this Issue Nov 23, 2016 · 3 comments


None yet

6 participants

syuilo commented Nov 23, 2016 edited

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:



Which version of Riot does it affect?


How would you tag this issue?

  • Question
  • Bug
  • Discussion
  • Feature request
  • Tip
  • Enhancement
  • Performance

Thanks, Great lib! ❤️ cheers 🍺

@syuilo syuilo changed the title from Class does not update when value becomes false to Class does not remove when value becomes false Nov 23, 2016
YoussefKababe commented Nov 23, 2016 edited

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' }
@cognitom cognitom added the bug label Nov 23, 2016
fabien commented Nov 23, 2016 edited

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 commented Nov 26, 2016 edited

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)
  remAttr(dom, attrName)

This approach fixes this issue too.

@believer-ufa believer-ufa added a commit to believer-ufa/riot that referenced this issue Nov 26, 2016
@believer-ufa believer-ufa Try fo fix #2082
Trying to fix #2082 issue about classes.
@GianlucaGuarini GianlucaGuarini added a commit that closed this issue Nov 26, 2016
@GianlucaGuarini GianlucaGuarini closes #2082 de8c5a9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment