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.
Related
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 a status field, coming from my API. It has a value between 0-3.
my response looks like this:
{ status: 0 }
I can show the value in Edit with TextInput, it shows the value (in this case 0).
However I want it to show it with SelectInput, as in Edit mode I want to change the value of the status.
my SelectInput looks like this:
<SelectInput label="Status" source="status" choices={[
{ id: '0', name: 'elfogadásra vár' },
{ id: '1', name: 'aktív' },
{ id: '2', name: 'inaktív' },
{ id: '3', name: 'archív' },
]}
optionText="name"
optionValue="id"
/>
Unfortunately when I save this, and refresh my page, my Status does not show the current value (which is 0 in this case, it should show me 'elfogadasra var', but it's empty)
What do I do wrong?
The way i achieved this was in the following manner
<ReferenceInput label="Country" source='country.id' reference="Country" sort={{ field: 'name', order: 'ASC' }} alwaysOn>
<SelectInput optionText="name" optionValue="id" allowEmpty />
</ReferenceInput>
I needed to load my choices from that database though however the concept is the same... i suspect that what you are using for source is wrong.. Look in the redux dev tools.. under state --> form --> record-form --> values and you should see something like status.id that you should be using for source instead.. i have the same type of object in my form country {id: 2}... but that is not what you use to get the input to show your existing value...
Your solution may be as simple as calling a diff value in source, but you'll know what that should be by peeking into the state {status: 0} must have something in front of it in state like something --> {status: 0}
Not the real reason but in case somebody is tackling with the same issue it is worth checking:
I found out I was passing initialValues to the Form component on create and haven't skipped them on the edit mode. That's why it was always resetting the SelectInput's.
I have an address form that has a United States option and an International option. When the U.S. option is selected a state drop down appears. When the International option is selected, the state drop down disappears.
My issue is when a state is selected, the form data for the state option doesn't get removed when the international option is selected and I do a POST to my service.
Is there a way for me to make sure an empty string is sent when international is selected, and not the previous data.
Below is the code for my radio group field to select U.S. or International.
<Field
component={RadioGroup}
name={countryCodeName}
choices={[
{
label: 'U.S. or U.S. Territory',
value: 'USA'
},
{
label: 'International',
value: 'international'
}
]}
label="Location"
/>
Below is the code for the state only on usa selection. I use formValueSelector from redux-form to accomplish this.
{hasInternationalValue === 'USA' && (
<Field
component={Select}
name={stateName}
label="State"
options={stateOptions}
/>
)}
I ended up solving this issue by using Redux-Form's change() function.
change(form:String, field:String, value:String)
Saves the value to the field.
Inside the form:
this.props.changeFormValue('fieldValue', data);
Inside the container:
changeFormValue: (key, value) => {
dispatch(change('formName', key, value));
}
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'
}
]