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...
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 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 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'
}
]