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.
Related
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.
This is my Field:
<Field
name="postcode"
label="Postcode"
nonReduxFormInputProps={{ id: 'postcode' }}
component={TextInput}
/>
In my test, I've done this so far and it passes but I think it's wrong because for the name, 'postcode' in the code starts with a lowercase, but in my test it only passes if the name is with a capital 'P'. I also don't know how I would test the label, nonReduxFormInputProps and component.
describe('postcode field', () => {
it('should render a Field component with correct props', () => {
render(<TestForm />);
expect(screen.getByRole('textbox', { name: 'Postcode' })).toBeInTheDocument();
The { name: 'Postcode' } query matches the label attribute, and not the name attribute. Here's what the doc says:
You can query the returned element(s) by their accessible name. The accessible name is for simple cases equal to e.g. the label of a form element, or the text content of a button, or the value of the aria-label attribute.
You can see details here: https://testing-library.com/docs/queries/byrole
I have been using the select from react-select for some time. So far, only with predefined options, without any functionality for adding any other option/s.
As far as I could read up and figure out, there is also something called creatable, which is exactly doing that. But it doesn’t allow my to predefined/static lists, as far as I could see.
I assume both have to be implemented to get either functionality, or is there a way or prop to just stick one of them?
Edit:
Maybe I didn’t emphasis to enough on the static part. Basically, I would like to have one component that has a prop like: “canAddOptions: bool”. To either allows to add values or not. As far as I can understand, I have to implement both to get this..?
I'm also using similar approach in my application, where I'm rendering static list as options and it should work as a creatable select.
As per the problem statement, you can use isValidNewOption={() => false} to make creatable as normal select.
Try something like below:
import CreatableSelect from 'react-select/creatable';
<CreatableSelect
isMulti
isValidNewOption={() => false} // You can apply condition here as per the prop you will get.
options={[
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' },
{ value: 'three', label: 'Three' },
]}
/>
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 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'
}
]