I am using react-bootstrap-multiselect for my project. I need to pass a default value to it before loading. Does react-bootstrap-multiselect have an API to pass a default selected value(s)?
<Multiselect
onChange={this.handleMultiSelect}
value={this.props.multiSelectData}
data={this.props.multiSelectData}
buttonWidth="10
multiple
/>
I want to pass a dynamic value, which will depend on a user click.
Thanks
For everyone who comes across this question again:
<Form.Control as="select" multiple defaultValue={['FOO', 'BAR']}>
<option>FOO</option>
<option>NOT SELECTED</option>
<option>BAR</option>
</Form.Control>
You can simply set an array as defaultValue.
In the example above FOO and BAR are selected.
To do this, set the selected attribute to true for the "data" parameter (in your case, this is an array for the required element this.props.multiSelectData). An example can be found at this link.
An example of an array for the "data" parameter with a default value:
var mass = [
{
value: -777,
label: 'No data',
selected: true
},
{
value: 888,
label: 'data 888'
}
]
Related
I'm facing the issue on the react-select package.
I'm going to pass the id to the every options in the Select component from the react-select component.
My code looks like bellow.
var options = [
{id: 'lease', label: 'Lease', id: 'ownership-details-option-lease'},
{id: 'own', label: 'own', id: 'ownership-details-option-own'}
]
I'm going to add the id to the option in the react-select component.
<Select
name='ownershipstatus'
onChange={(e) => {}
...
}
options={options}
/>
Your 'option' objects cannot have two id keys. Object keys must be unique, or the last defined will overwrite the first.
You have two props, getOptionLabel: (option:Object) => String and getOptionValue: (option:Object) => String that you use to define "this is the displayed value and this is the actual value".
pseudocode:
<Select
getOptionLabel={(option) => option.customLabel}
getOptionValue={(option) => option.id}
value={someValueState}
onChange={({target: {value}}) => setSomeValueState(value)}
{...otherProps}
/>
The value you pass in to your control should equate to the 'value' of an option. Are you trying to set an explicit 'id' on options in your list? Why? Are you attempting to write unit testing? If so, use react-select-event and #testing-library/react. You won't need those id's. If it's something else, give us a valid use case.
I am using react admin's select input& I am currently on version 3.13 and this version allows the attribute 'allowEmpty' to show an extra empty field in the selection dropdown. Also we can use 'initialValue' prop to set the initial value for the inputs. But is there a way to set the empty value as default value selected for my dropdown?
In my case one of the values from the possible choices is getting defaulted
Can you elaborate on your problem? When you have set the allowEmpty prop, the SelectInput should be empty by default. I was able to reproduce the desired behavior with the follwing code:
<SelectInput
source="test"
label="Test"
allowEmpty
choices={[
{ id: "1", name: "yo" },
{ id: "2", name: "yoyo" }
]}
initialValue="" // This line can be omitted
/>
One problem I could think of would be when you have set default values for the <Form /> component you're using, <SimpleForm /> per default.
Is it possible (by default) to specify one label for react-select dropdown options and have another label
be displayed in input field after one of the dropdown options has been selected.
For example, if I have following object:
{label: "David Smith", selectLabel: "Dave", value: 1}
Is it possible by default to have it so label is displayed in the dropdown list and after I make a selection that selectLabel is displayed in input field?
By saying "default" I mean if there is a prop somewhere or something that would allow me to specify values for dropdown list and input field separately?
So basically I'm looking to get something like this:
and after selection occurs I want "Dave" (and not "David Smith") to be shown in the input field:
You can use the formatOptionLabel to achieve this result.
<Select
name="color"
options={colourOptions}
formatOptionLabel={(option, { context }) => {
/* context can be either `menu` or `value`
menu - dropdown
value - value displayed
*/
return context === 'menu' ? option.label : option.color;
}}
/>
Codesandbox
Docs
I am trying to render a Dropdown with a placeholder but the placeholder doesnt render. I'm not sure why. My Dropdown is as follows.
<Dropdown
loading={loading}
error={!!error}
inline
value={this.props.entityId || null}
onChange={(e, { value }) => {
client.writeData({data: {teamBudget: value, __typename: 'TeamBudget'}})
}}
options={options}
placeholder={options ? 'Select Draft' : 'Error!'}
/>
when I comment out value the placeholder displays as expected. Can value not be defined along with placeholder?
I don't know the component you are using,
but the common convention is,
value={the value you are expecting to display inside the dropdown field}
which should be in a label value pair
eg: [{ value: '1', label: 'one' }]
i can only suspect your this.props.entityId isn't in this format.
also, that could be the reason it sabotages the placeholder.
FYI: usually, if you don't mention value={} in props, it handles it by default,
which could be the reason it works properly when ommits...
I have an extremely simple md-radio-group and I am having a tough time setting the default value. The group is using an object (which I am assuming is related to the problem).
Please reference my codepen example.
I am defaulting the md-radio-group to the 2nd option but the radio button is never selected.
Am I missing something?
Couple of changes here:
You are interpolating the value of the radio. Doing so is unncessary, and loses reference to the object in the array for which you are iterate. Change your value to ng-value="option".
In your controller, set your default option. Since array positions start at 0, for your second option, you'll use [1].
$scope.optionExample = $scope.options[1];
A simple way if you add another attribute to make default selection, like below
$scope.statusList = [{ id: "APN", status: "Approved", isChecked: true }, { id: "VIP", status: "Scheduled", isChecked: false }, ];
in HTML
<input type="checkbox" ng-model="item.isChecked" ng-repeat="item in statusList"/>
<label class="form-control" style="width:305px"> {{item.status}} </label>