CSS of toggle-component not changing

[MarioDiar]

I'm rendering my component with an if like so. The boolean changes via a button.

{{#if myBoolean}} {{my-emberclitoggle-comp}} {{/if}}

And the CSS of the component is not switching to the selected state when clicked, but the value is being changed correctly.

When the component is rendered normally example:
{{my-emberclitoggle-comp}}
the CSS changes fine when clicked.

I also tried by rendering the component via transitionTo and the CSS doesn't change either.

Here is a reproduction in a vanilla 2.3.0 Ember app.
https://github.com/MarioDiar/emberToggle-Bug

[knownasilya]

Thanks, I'll have a look.

[knownasilya]

It's a bug for sure, but I'm unsure if it's a bug with my code or in Ember (most likely mine ).

[MarioDiar]

I believe it has something to do with the javascript of the component not being registered when rendered.

[knownasilya]

No, the javascript is registered. The issue is that the computed property that determines the visual state is not recalculated for some reason.

[MarioDiar]

yeah, it's really weird. Do you know if this happened in earlier versions of the addon?

[RobbieTheWagner]

Seeing this issue as well. Any updates? I looked at the code, and I am quite confused. Why is there not just a boolean that is set to true or false for toggled?

[knownasilya]

@rwwagner90 the object is basically me merging a PR that needed more thinking through. I haven't heard too many people mention it, but I'm willing to make it simple again. There is also #54 to take into account.

Are you seeing the issue in v4?

[knownasilya]

What are the steps to reproduce this? I'm trying to write a test that reproduces the issue.

[knownasilya]

I don't think this is an issue any more.

[RobbieTheWagner]

@knownasilya I have not checked out the example here, but the issue we have is the value passed in does not effect the checked value of the checkbox, so the styles are not applied correctly when you change the value from outside the component and pass it down. I assumed that was the issue here as well.

[knownasilya]

Give https://github.com/knownasilya/ember-toggle/tree/simplify a try.

[steverhoades]

My issue may be related to this, but the css is not 'toggling' or changing it's displayed state on Ember 2.13 either. It is triggering the onToggle action though.

[RobbieTheWagner]

@steverhoades have you tried version 5 alpha?

[steverhoades]

@rwwagner90 Not yet. I think my issue at the moment is tied to the fact that the toggle expects 'on' or 'off' as the value. If it is not one of these values then it doesn't pass the validValue check on the toggled computed property.

There may be something i'm missing here, still investigating. My values are 1 and 0, so transforming those to on, off seem to at least get it to show the state transition for now.

Where can I see 5 alpha?

[steverhoades]

@rwwagner90 nevermind, i see it. I'll give it a try.

[steverhoades]

@rwwagner90 after installing 5 alpha on Ember 2.13 I get the following error:

Error: Compile Error: x-toggle-label is not a helper

So, it doesn't appear to work.

[RobbieTheWagner]

@steverhoades the usage is different in 5. We switched to contextual components and have not updated the docs yet. You'll want something like this:

{{#x-toggle value=value showLabels=true onToggle=(action (mut value)) as |toggle|}}
    {{#toggle.offLabel as |label|}}
      <b>{{label}}</b>
    {{/toggle.offLabel}}

    {{toggle.switch theme='flip' onLabel='diff on' offLabel='diff off'}}

    {{#toggle.onLabel as |label|}}
      <b>{{label}}</b>
    {{/toggle.onLabel}}
  {{/x-toggle}}

[steverhoades]

@rwwagner90 that example results in:

ember.debug.js:19818 Assertion Failed: The component helper cannot be used without a valid component name. You used "x-toggle-switch" via (component "x-toggle-switch")

I think this may be related to the fact that I'm using pods with 2.13. I've run into a few issues where add-ons were using the pods structure.

[steverhoades]

@rwwagner90 this is the exact way i'm using your example

{{#x-toggle value=toggleValue showLabels=false onToggle=(action (mut toggleValue)) as |toggle|}}
  {{toggle.switch theme='flip'}}
{{/x-toggle}}

[RobbieTheWagner]

@steverhoades yes, this is due to the use of a podModulePrefix. We merged a commit to revert back to classic, rather than pods, but have not released since then.

You can setup your own imports in your project to get around this, if you'd like.

[steverhoades]

@rwwagner90 using the latest master appears to work. Any idea when you'll have another release tagged?

[knownasilya]

I'm going to try and do a v5 release today.

[steverhoades]

Is there a way to get a value other than true/false ? For instance, I'd like to have the value be 0 for off and 1 for on.

[knownasilya]

I recommend doing that in your action.

{{#x-toggle value=toggleValue showLabels=false onToggle=(action 'onToggle') as |toggle|}}
  {{toggle.switch theme='flip'}}
{{/x-toggle}}

actions: {
  onToggle(value) {
    this.set('model.myProp', value ? 1 : 0);
  }
}

[steverhoades]

My usage is a little more complicated than that, but I'll just wrap this in another component to handle that functionality.

As a feature request, it would be really nice to have that encapsulated in the component itself so that (action (mut value)) could be used without the need to define the onToggle method.

[steverhoades]

also.. Thank you!

[knownasilya]

You could define a custom helper that allows you to do something like that. See https://github.com/DockYard/ember-composable-helpers/blob/master/addon/helpers/toggle.js for an example.

Something like onToggle=(toggle-binary (mut myProp))

[steverhoades]

@knownasilya Thanks.. i'll check that out as that might be a good interim solution.

[knownasilya]

https://ember-twiddle.com/77630479fe4e1a7079ef90ec66fe5002?openFiles=templates.application.hbs%2Ctemplates.components.toggle-switch.hbs

There might be a way to remove the (action ) wrapper, but I don't have the time to look deeper at the moment.

[RobbieTheWagner]

@steverhoades why not just use the boolean values, and then have computeds for the 0 and 1 that you need? I assume you just need numbers to send to the database or something?

[steverhoades]

@rwwagner90 Thanks for the suggestion! After looking at my model I can see I defined it as a string vs. a number. Changing the value to a number works in this case.

I still still think it would be a great feature to support custom value options though.

[RobbieTheWagner]

@steverhoades I would have to disagree with you on that. We specifically moved away from custom values on purpose. This is a checkbox behind the scenes, so you should just map true and false to the values you need in your app.

[steverhoades]

@rwwagner90 fair enough. Perhaps it only makes sense for my use case in which wrapping the component or creating a helper would be sufficient.

In my particular use case I don't know the value for which I'm modifying. The configuration for the form comes from the server and is not hard coded into the Ember app. I suppose I'll need to enforce a boolean/number only value option for this type of input which makes sense since the underlying input is a checkbox.

Thanks again for the assistance, it's greatly appreciated.

[knownasilya]

@MarioDiar can you test with v5? Thanks!

[MarioDiar]

Sure, will let you know later today or early tomorrow.

[knownasilya]

@MarioDiar any chance to test it out?

[MarioDiar]

Seems to be working fine now.