In my cypress runner, I can see that it is successfully finding the checkbox, as I can see it has the type="checkbox" attribute. I also noticed that by manually clicking the checkbox, its "value" attribute became "true", so I tried using invoke('attr', 'value', 'true') which also "succeeds" but the text box remains unchecked. Not sure what I am missing. There are no onClick events that I can see that might uncheck it immediately after checking either.
My code:
What it returns:
I guess it may depend on the way that the checkbox is implemented. I had the same issue and the way that I found to solve it was by using .click({force: true}) instead of check({force: true})
Related
I am seeing this in Edge and IE.
I have a checkbox which is being initialized using initialValues to true.
On first visit its is displayed correctly as checked with a value of true, however after refreshing the page via the browser, the checkbox is not checked but still has a value of true. As i can continue to refresh the page the checkbox continues to switch in this way checked then unchecked on next refresh. redux form 7.2.3 react 15.6.2.
Thanks
The value of a checkbox is what will be associated with its name if it is checked. Checking a checkbox should not change the value, it should change the checked property.
This is not specific to redux-form, it is just how form elements are intended to work. It looks like redux-form wants to use value instead, and it doesn't work right.
In any case, I think you want to specifically handle the checked property with something like checked={value}.
Roy's answer is correct. Adding some redux-form context, passing checked to a Field component will override the normal behaviour. The normal behaviour is to compare if the value stored in redux-form's state is the same as the value prop specified on Field if so the checked prop is true.
So for example if the store state is values: { test: true } and your Field has value={true} then the end result is the checked prop is true.
The F5 refreshing toggle most likely suggests that your values initialization is changing on each refresh. It's hard to help you beyond a general statement like this without clear reproduction steps.
I want to disable/enable a submit button based on the state of paper-checkboxes in my iron-form. So, for that I am using the iron-change event.
In that event, I want to see whether any checkbox is checked or not. One approach is to loop over all checkboxes.
Is there any other way in Polymer to get the length of checked paper-checkboxes?
Ok I figured it out. The paper-checkbox has 'checked' attribute set.So, we can do something like this:
document.querySelectorAll('paper-checkbox[checked]')
I have some problem using browser-sync with angular js, here's my question. I successfully sync the click and scroll events with browser-sync, but not the input fields. Although the "text" in the input field is updated, the ng-model bind to the field is not.
For example, when I type "abc" in chrome, the corresponding field in firefox shows "abc" too, but the model value doesn't get "abc" at all, so the next operation in firefox will base on a empty value which leads to a wrong result.
Another example is, I use angular-strap for my dropdown list, when I click a list to collapse in chrome, the list in firefox doesn't collapse at all. I think this is because the click event has been handled by angular-strap so the browser-sync can catch it.
What should I do to make the browser-sync and ng-model works together? Please give me some advises, thank you.
I have this code:
<input type="checkbox" ng-checked="item.selected == 'yes'" ng-click="change()">{{item.selected}}<br/>
http://jsfiddle.net/NmQXp/2/
As you can see, there are three identical checkboxes, with their checked status binded to the value of some string. The catch is that I want to introduce an intermediate "partially selected" state to the checkboxes. In fact what I want to do is use the checkbox to change the value from "pending" to "ongoing" and then to "done" (I'm making a ToDo list).
If you click one of them several times you can see the correct behavior in the others, but the checked status is wrong in the one you are clicking.
¿Is this a bug in Angular Binding, or am I missing something?
Well i tried to fix your fiddle to take care of the checked issue. The behavior was inconsistent because checkbox gets checked when mouse is clicked over it due to the default HTML behavior. I added these lines to prevent the default behavior for checkbox.
if ($scope.item.selected == 'no') {
$scope.item.selected = 'halfway';
$event.preventDefault();
}
Here is the updated fiddle.
http://jsfiddle.net/cmyworld/J27jN/
Team,
I am having one problem where I donot want to expand combo box on certain flag and want to display the alert message.
there is no event like onClick in EXTJS so I tried with focus event but still combo box is expanding.
code
focus:function() {
if(this.store.baseParams.donotExpandFlag) {
alert("I should not expand this combo");
// What to do here and out side of IF block so that there is conditional expansion
}
}
You need to specifiy your ExtJS version and please format your code.
Here is what you can do for ExtJS4.x
Manually set/unset the isExpanded property. That should work (untested)
for ExtJS3.x you will have to override the the isExpanded() method and in additon apply a custom flag which indicates blocked/auto and get checked before the default code gets executed.
You may try this (untested)
_isExpanded: true, // true means block, false auto
isExpanded: function(){
return this._isExpanded || (this.list && this.list.isVisible());
},
No, this works. See the JSFiddle for ExtJS3.4
Second JSFiddle for ExtJS3.4 with a form