When I load app (in browser) its not keeping radio-button (by default) value selected. Any work around?

{{#radio-button checked="checked" class="clusters__size-filter-label" value="size" groupValue=size changed="filterChanged"}} Size {{/radio-button}}

{{#radio-button class="clusters__size-filter-label" value="volume" groupValue=size changed="filterChanged"}} Volume {{/radio-button}}

Hello,

I found a "non blocking" bug in the run loop (I guess it there). In fact, it blocked my UT... but I found a "work around" fix.
I describe it in the way I made it happen.

I build a model containing a boolean :

var MyModel= DS.Model.extend(EmberValidations.Mixin, {
  switcher: DS.attr('boolean')
)};

MyModel.reopen({
  validations : {
    switcher: {
      inclusion: {
        in: ['true', 'false']
      }
    }
  }
});

I user my value on a radio button. A radio button can't have boolean values, that's why my validation uses strings.
All this works, the type changes between boolean and string on the need and the validation works fine. And the REST part in Java gets the boolean value.

My problem is when I submit my page with no error.
If eveything is fine, I do a forward to another page (a list of MyModels). Then, after some seconds, I have an error in the consol :

TypeError: this.$(...) is undefined

Following the error, it happens in this part of generated code :

 _updateElementValue: (function () {
    Ember['default'].run.next(this, function () {
        this.$().prop("checked", this.get("htmlChecked"));
    });
}).observes("htmlChecked")

I use more than one radio button, but the only one making the error is the "true / false" one.

The "work around" fix I use is to define my property as string and not boolean. Everything works fine all the same, and I don't have the error anymore.

That's all, folks !

The following allows both radio buttons to be toggled at the same time.

{{#radio-button value="commercial" groupValue=questions.leaseTo}}
  Commercial
{{/radio-button}}

{{#radio-button value="residential" groupValue=questions.leaseTo}}
  Residential
{{/radio-button}}

when groupValue=leaseTo, everything works fine.

Latest released version is 2.0.1. Changes on master would fix many deprecations.

Crucial for keyboard support and general accessibility.

Using this addon within an engine seems to not render the component's template. I'm only seeing the yielded content with no wrapping component elements. Moving the component's templates to the addon directory and setting the layout property (today this is the default blueprint of a component by ember-cli) on the component fixes this issue.

In latest ember (3.4+)
using sendAction results deprecation warning [deprecation id: ember-component.send-action]

Was trying to upgrade ember - not able to get the latest version of ember-radio-button. The package.json of ember-radio-button mentions version as 0.0.0 and we have 2.0.1. How to get the latest version?

I noticed in the component you handle a "click" event but hacking around with my own component for this revealed that you could also listen to the change event.

I'm just curious why the team at yapp went with click (ie- is a cross browser thing / mobile browser thing / or just the right thing for the radio button input) ?

Thanks for an awesome OSS project team!

Hi All,

On my app, I have Create, which function normally. It saves value to my database.

Then on edit, the radio button of the same value is not 'checked'.
I want to add attr checked="checked" on initial state, but it seems nothing changed.

Thank you

EDIT : Or this issue may equal to, 'How to make radio button checked by Jquery manually ? Because it adding checked attribute does not change anything'

The link to Ember Observer seems not to have a version 3 for Ember 3.16+ as stated on the ReadMe.md. My radio buttons seem to have no labels now after updating to Ember 3.26

Like the topic says. It seems like a roundabout way to do it.

Forgive the ignorance if this is a simple misunderstanding, but how can we attack an action to the label's click? For my needs, changed can be triggered both programatically and with other keyboard methods. I'd like click to fire a bit differently.

After I upgraded from Ember 2.3.1 to 2.9.1, Ember throws the following error whenever a template using the radio-button component renders:

Error: Assertion Failed: You cannot use `attributeBindings` on a tag-less component

This addon is unusable in 2.9.1 because of this.

To me, It seems like a critical flaw in this addon is that the groupValue of a radio button is not changed back if it is deselected. For example, if I select radio button A, it's groupValue will become value, but if I think select radio button B, its groupValue will also become value. Then, both radio buttons A and B have groupValue === value, which means that I can't determine what the user actually wanted to select when I go to validate the form on submit. This violates the basic premise of having radio buttons in the first place.

You can still install this addon with npm install --save-dev ember-radio-button and it works like a charm, but recent changes in Ember CLI mean that a little update is needed for the addon install to work again.

Nice component! Thanks for making it public.

I upgrade my Ember app to use the latest commit on the master branch of ember-radio-button to remove all the deprecation warnings. It seems that the latest code on the master branch no longer sets the aria-checked attribute.

{{! component usage }}
<RadioButton @value='yes' @groupValue='yes' @name='response' />

{{! `master` branch rendered HTML }}
<input name="response" type="radio" value="yes">

{{! version 2.0.1 rendered HTML }}
<input aria-checked="true" name="response" type="radio" value="yes">

I've reproduced this issue with both an Ember 3.28 app as well as a 4.1 app.

I created a simple Ember.js app with a template that uses an ember-radio-button and noticed that the field in the DOM is missing the "value" attribute. Example can be found here:
https://lepolt.github.io/radio-button-test/

The attached screenshot demonstrates the output as well.

We are using Ember 2.11. This only affects IE, at least version 11. Appears to be related to the following Ember.js issue: emberjs/ember.js#14712

Would love if you could publish a version with the new required features 😄

It seems like the label should have it's for attribute generated as the input id is.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Any thoughts on that?

Hi I am trying to add my own class for styling as
{{radio-button name="policyControl" class="link-radio" value=true groupValue=brand.ispolicycontrol changed="policyControlChanged"}}
However the styles don't get reflected in the template..what am I doing wrong?

There are things I regret, you cant forgive.. you can't forget ...

Use case is I want to reset my radio button's checked status after a user changes it because the form validation fails..

{{radio-button
      value="right"
      groupValue=direction
      changed="changeDirection"
}}

{{radio-button
      value="left"
      groupValue=direction
      changed="changeDirection"
}}

So direction is originally set to 'right', user changes it to 'left'..
In my changeDirection action the change fails validation, so I execute
this.set('direction', 'right');
but this fails to check the 'right' button, as expected?

I notice that if I don't have the changed action on the component, then it works fine.. I can set 'direction' OK..

Currently, it is not possible to specify a label using inline invocation.

{{radio-button
    value="green"
    groupValue=color
    changed="colorChanged"}}

{{#radio-button
    value="blue"
    groupValue=color
    changed="colorChanged"}}
    Blue
{{/radio-button}}

What do you think about adding a label attribute? Or if none is specified using the value attribute as the label? Perhaps I am not seeing the use case, but I haven't come across a need for a label-less radio button.

{{radio-button value="green" label="Green" groupValue=color changed="colorChanged"}}

The current release (1.2.1) triggers an annoying deprecation warning w/ recent versions of Ember that would be fixed by upgrading to the latest release of ember-cli-htmlbars (2.x). Please consider upgrading this.

├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected] 

The deprecation warning looks like this and is described here:

DEPRECATION: An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }). Accessed from:   new NPMDependencyVersionChecker (/path/to/project/node_modules/ember-getowner-polyfill/node_modules/ember-cli-version-checker/src/npm-dependency-version-checker.js:11:33)

I'd like to be able to set the HTML5 autofocus attribute but autofocus=true doesn't add the attribute.

{{#radio-button
    name=name
    groupValue=selectedValue
    value=option.value
    changed="onChange"
    disabled=option.disabled
    required=required
    autofocus=true
}}
    {{option.label}}
{{/radio-button}}

I'm getting the following error Assertion Failed: You must pass exactly one argument to the if helper when I use this example:

{{#radio-button
    value="blue"
    groupValue=color
    changed="colorChanged"}}
    Blue
{{/radio-button}}

Component without block works fine.

Versions:

Ember: 1.8.1
Handlebars: 1.3.0
jQuery: 1.11.3

Hi,

I'm a big fan of closure actions so I enabled them on my local copy by replacing line 37 with this.attrs['changed'](newValue); and works great. However I don't know how to handle compatibility for others. So I'm here requesting if closure actions could be enabled on a future release of this addon.

Thanks,
Jorge L

I think this will require setting the name attribute to be the same for all radio-button elements, and then you can set it on one

{{#radio-button value='street' groupValue=proximity required=true}}
  Street
{{/radio-button}}

In order of the data down, actions up paradigm it would be great to change the behavior of groupValue.
I run into this with a readOnly or reads computed property where i lost control over groupValue after the first change.

I would suggest to remove this line and let ppl handle the change of the groupValue.

If the radio buttons are not inside a form element, the action changed will be called only once per radio button.

(EmberJS 2.7)

Currently, in order to select from a group of these radio buttons, the user has to use the spacebar key. In order to navigate between selectable buttons, the user has to use the tab key.

These actions are WCAG non-compliant- tab should take you to the next focusable element after the radio group. Users should be able to use the up, down, right and left arrow keys to select an item in a radio group see the table delineating interaction, and keystrokes here

The issue seems to be caused by the rendering of the nested <input> inside of the <label> - though this is semantic, and is providing the ability to nicely style labels around the inputs, it is also semantically correct to have the label and input as siblings. Changing this to the latter fixes the aforementioned a11y issues with an obvious tradeoff for visual regressions.

browser: chrome v81

labeled-radio-button was introduced before the block form of radio-button came along and made it unnecessary. It has not been documented in the readme since version 1.0.0: b1eedac

Why am I getting these depreciations?
[email protected] is the version I am using.
I am using Ember 3.28

The checked property path was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.checked}}

The joinedClassNames property was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.joinedClassNames}}

The radioId property was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.radioId}}

The radioClass property path was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.radioClass}}

The autofocus property path was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.autofocus}}

The disabled property path was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.disabled}}

The name property path was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.name}}

The required property path was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.required}}

The tabindex property path was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.tabindex}}

The groupValue property path was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.groupValue}}

The value property path was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.value}}
Transition Plan
1
The ariaLabelledby property path was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.ariaLabelledby}}

The ariaDescribedby property path was used in the ember-radio-button/templates/components/radio-button.hbs template without using this. This fallback behavior has been deprecated, all properties must be looked up on this when used in the template: {{this.ariaDescribedby}}

Here is a snip of the module's template
ember-radio-button/addon/components/radio-button.hbs

  {{radio-button-input
      class=radioClass
      id=radioId
      autofocus=autofocus
      disabled=disabled
      name=name
      required=required
      tabindex=tabindex
      groupValue=groupValue
      value=value
      ariaLabelledby=ariaLabelledby
      ariaDescribedby=ariaDescribedby
      changed=(action "changed")}}

Like it says on the tin ^

I've tried adding this.get('classNameBindings').pushObject('disabled'); to the wrapInLabelIfUsedAsBlock function to no avail. The disabled state works but it doesn't apply itself to the label like checked does. I still haven't totally wrapped my head around how the component is built out and I'm sure it's something dead simple.

I'm willing to do a PR with tests if this is a thing that would be helpful to the project in general.

I have a variable number of radio button groups in a list.

The only way I can see to handle the change event of a specific group is to give each group a unique value for the changed attribute and have a correspondingly named action in the controller.

By not knowing the number of groups or the names up front I don't see how this would work.
I think in my case it would make more sense to have a single action handle all groups. But for this to work the sendAction would have to send not only the new value but maybe also the name so the controller logic can figure out which group the action came from.

Any ideas?

I want to use data-test-selectors and for that purpose I wanted to add data attributes to my radio button.
I tried adding some data attributes but they did not work.

Hello,
I have used ember-radio-button in a project and its great.
But when I try to build for the production environment I get
Uncaught Error: Could not find module ember-radio-button/components/radio-button

Is there a way to generate the add-on ?
Or a bower installer?

Thanks

The readme.md says

groupValue | any | the value representing a radio group's current value. supply the same groupValue to every radio-button in a group

I'm not sure what this means. It sounds like you send what would normally be "name" (to make them act as a radio group) but then fetch groupValue to get the currently selected value?
Can more documentation be put in to explain how you fetch the selected value?

I saw this syntax in the radio-button-test. What does the tilde do?

this.render(hbs`
    {{#radio-button
        groupValue=groupValue
        value=value
        checkedClass="active"
        changed='changed'
        classNames='blue-radio'
    ~}}
      Blue
    {{~/radio-button}}
  `);

The radio button input component is getting a blank text node inserted into it. This is causing IE8 to error. This can be fixed by setting the defaultLayout to null as referenced here.

Found this after upgrading from 1.12 to 1.13-beta.2. Basically,

{{#radio-button
value="blue"
groupValue=color
changed="colorChanged"}}
Blue
{{/radio-button}}

seems to be outputting the same html as

{{radio-button
value="green"
groupValue=color
changed="colorChanged"}}

Hello :)

Is there any particular reason that the aria-checked attribute isn't set on the radio input element?

https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/radio/radio-1/radio-1.html

DEPRECATION:

hasBlock is deprecated. Use has-block instead. ('ember-radio-button/templates/components/radio-button.hbs' @ L1:C6) [deprecation id: has-block-and-has-block-params] See https://emberjs.com/deprecations/v3.x#toc_has-block-and-has-block-params for more details.

I'm simply drawing button in an {{each}} and I'd like to set checked.

if groupValue=color then I had assumed if I draw all the buttons with groupValue="3" then the item with the value eq 3 would be checked, but does not seem to be the case.