I'm trying to setup a RadioGroup component that has the Radio component with the 'Data' label initially checked. But when I use the following code:
<RadioGroup
onChange={(e) => {
this.store.setDataFilterSelection(e.target.value)
}}
>
<Radio label='Data'
defaultChecked
value='1'
className='radio-selectors' />
<Radio label='Description'
value='2'
className='radio-selectors' />
<Radio label='Data Source'
value='3'
className='radio-selectors' />
</RadioGroup>
I get the following warning in my console.
Blueprint.Radio contains an input of type radio with both checked and
defaultChecked props. Input elements must be either controlled or
uncontrolled (specify either the checked prop, or the defaultChecked
prop, but not both). Decide between using a controlled or uncontrolled
input element and remove one of these props. More info:
react-controlled-components
I've tried a couple of variations and can't seem to get it right, basically I want to be able to monitor a change in the Radio buttons, but I can't tie them into state as they've done in the example here: http://blueprintjs.com/docs/#components.forms.radio
defaultChecked is only supported in uncontrolled usage (this is a core React concept, not a Blueprint thing), whereas checked is only supported in controlled usage--this is what the React error is telling you.
But if you're using RadioGroup then all the Radio children are forced into controlled mode and all state should go through RadioGroup. However RadioGroup does not currently support a defaultValue prop so this is not actually possible. I'd call this a bug in Blueprint, so good find!
Please file an issue on the repo and we'll look into implementing this (or even better, submit a PR with the fix!)
I had same error and I used useState and set the value which we want to be default while declaring the state like
const [radio, setRadio] = useState('defaultValue');.
Since we cant use defaultChecked I used the above method to get the option to be default checked.
Related
I'm new to alpineJS, so this might be a silly question. I try to increase an input field by 1, and submit the new value (preferably with a small delay).
I currently have:
<input type='button' value='+' class='qtyplus plus' field='quantity' x-on:click="qty++ && $event.target.form && $event.target.form.dispatchEvent(new Event('submit'));" />
This increases the value of the input form by 1, and submits the form. The problem is that the submitted value is the old value, and not the new one.
Any help with this is much appreciated!
The && operator in JavaScript is used to test conditions for true/false. You should instead use ; to put multiple commands in a single click. JavaScript does some unexpected conversions of values to true/false values. I'm surprised it works even partially. The mysteries of JavaScript! 😆
MDN has some good info on the && operator - called Logical AND
Here's your code sample with the change. I also made a couple of other changes using Alpine JS features:
debounce might be useful for you as it tells Alpine JS to wait until the user has stopped clicking before it executes the click code - which means your server won't have to process so many requests.
x-ref can be used instead of $event.target.form (not useful for you I think, but might be useful for others reading this question)
Form elements have a submit() method you can use. MDN has good info on this as well.
<form x-ref="myform">
<input
type='button'
value='+'
class='qtyplus plus'
field='quantity'
#click.debounce="qty++; refs.myform.submit()" />
</form>
After some more debugging I found the solution by using two on-click events, one that works directly and one that is delayed. This solved the issue for me.
<input type='button' value='-' class='qtyminus minus' field='quantity'
x-on:click="qty--;" #click.debounce.2000ms="$event.target.form.submit();"/>
https://codesandbox.io/s/blueprint-sandbox-f6ekm
Some components with BlueprintJS are not working.
I'm following the docs but it doesn't work at all.
Could you specify more details? Your sandbox example is rendering fine.
I use Blueprint for building desktop apps, everything works fine (except some bugs) and I just love this UI toolkit.
If you want to see how Switch component works convert it a class component and add the switch position into the state.
return (
<div>
<Switch
label={this.state.enabled ? "Enabled" : "Disabled"}
checked={this.state.enabled}
onChange={() => this.setState({ enabled: !this.state.enabled})}
/>
</div>
);
See your example extended https://codesandbox.io/s/blueprint-sandbox-biq69
EDIT
Also onChange passes ChangeEvent as the first argument.
<Switch onChange={(event: ChangeEvent<HTMLInputElement>) => this.yourHandler(event)}/>
In yourHandler you can get the state of the switch like this: event.target.checked
I believe I already know the answer to this, but in kendo are you able to bind a DOM element's visibility to the opposite of if a value in the observable is null or false?
For example: the normal behavior is to show a <div> that has content the user needs to manipulate as part of a "step". I want to give the user the option to skip this step. To do this, I add a checkbox that says "skip" and in it I bind its value to the property IsSkip:
<input id="checkbox-allow-skip" type="checkbox" data-bind="value: IsSkip" />
Can I then bind the <div>'s visibility to the opposite of IsSkip like this (pseudo code for data-bind):
<div id="optional-step" data-bind="visible: !IsSkip">
<!-- ... -->
</div>
Edit - I believe that it may be worth noting that currently I'm generating the onchange event of the checkbox and setting the value of a new property named CannotSkip to the opposite of IsSkip and binding the visibility to CannotSkip.
As you're probably already aware, you can't invert the value of the property within your binding expression as per your pseudo code due to the way the binding is constructed. However, the visible reference which appears in the binding expression is not a reference to a DOM attribute, it's actually a reference to a kendo binder which has a counterpart, the invisible binder which inverts the value for you. Hence the simplest solution to your problem is just this:
<div id="optional-step" data-bind="invisible: IsSkip">
<!-- ... -->
</div>
Eventually however, you're sure to encounter a situation where this won't solve the problem for you e.g. perhaps the visibility depends on the state of several flags? This type of scenario is best handled by binding to a function instead where you can execute whatever logic is necessary. The most important thing to remember when you use this approach is to manipulate any properties of your view-model using the get and set methods of the observable object. This ensures that any bindings to your function will be refreshed when any of those properties change; in kendo parlance this is known as a dependent method. You could solve your problem using this approach, like so:
var viewModel = kendo.observable({
IsSkip: false,
CannotSkip: function() {
return !this.get("IsSkip");
}
});
<div id="optional-step" data-bind="visible: CannotSkip">
<!-- ... -->
</div>
According to the documentation it is possible to:
In the XML markup, add the if attribute to an element and assign it to the property passed to the createController() method. Prefix the property name with the $.args namespace. Based on the property passed to the method, the application displays a different label.
So this means that if I put:
<Label if="Alloy.Globals.property" color="blue">Foobar</Label
Wont work?? Right now I´m not using the createController method, because it is added on the XML by a Require tag. Is there any way to do this?
As you can see in the docs there are some examples.
One of which:
<Alloy>
<Window>
<Label if="$.args.fooBar" color="blue">Foobar</Label>
<Label if="$.args.fooBaz" color="red">Foobaz</Label>
</Window>
</Alloy>
So yes, this will just work. As long as the property you provide is already set when rendering. Once your variable changes while the view is open it won't update it. For that you'll need data binding
I have been using Angular Material in one of my project. Suddenly I realized the need for having a select all option on md-select. I think I will pull a git request for the same.
However, currently I am looking for a similar drop down structure with checkboxes (like md-select multiple) but also a select all option.
I am aware that I can push a dummy empty entry into md-select option array and manipulate reverse way on its selection. But it would require a lot of code change in my current structure and would also not be a elegant thing to do.
I tried looking for it in bootstrap and jQuery-UI, but could not find one yet. Is there any such control known to anyone. Any redirection will be helpful.
You can do that easily inside the HTML. It requires only one line of code, or two lines, if you want a "select none" option as well. For example
<md-input-container>
<label>Users</label>
<md-select ng-model="selectedUser" multiple=""
ng-model-options="{trackBy: '$value.id'}">
<md-optgroup label="Users">
<md-option ng-repeat="user in users"
ng-value="user">{{ user.name }}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<button ng-click="selectedUser=users">all</button>
<button ng-click="selectedUser=[]">none</button>
Example in Plunker.
Edit: I updated the below Plunker to show the "all" button inside the select box next to the "Users" optgroup title. The relevant change:
<md-select ng-model="selectedUser" multiple="" ng-model-options="{trackBy: '$value.id'}">
<button ng-click="doSelectedUser()" style="float:right">all</button>
<md-optgroup label="Users">