yapplabs / ember-radio-button Goto Github PK
View Code? Open in Web Editor NEWRadio button component with nice syntax.
License: MIT License
Radio button component with nice syntax.
License: MIT License
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}}
`);
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'
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.
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
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.
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
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"}}
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.
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}}
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!
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 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
Would love if you could publish a version with the new required features π
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
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
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.
Crucial for keyboard support and general accessibility.
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)
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.
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..
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
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?
If the radio buttons are not inside a form element, the action changed
will be called only once per radio button.
(EmberJS 2.7)
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
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?
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?
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]
I'd like to be able to set the HTML5 autofocus
attribute but autofocus=true
doesn't add the attribute.
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 ...
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?
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.
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")}}
The following allows both radio buttons to be toggled at the same time.
when groupValue=leaseTo
, everything works fine.
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
Like the topic says. It seems like a roundabout way to do it.
Latest released version is 2.0.1. Changes on master would fix many deprecations.
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.
I've reproduced this issue with both an Ember 3.28 app as well as a 4.1 app.
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
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"}}
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.
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
.
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 !
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.