I am trying to display a default value in react-select based on an array of values. I have confirmed that the value is equal to the value I am comparing against. I have looked through this post, this post, this post, this post, this post and this post. Despite the similarities, the defaultValue will still not set. I have confirmed by loggin the result of my comparators that they are the same, both in uppercase, both strings.
My Select element is
<Select
name="disposition"
classNamePrefix="select"
options={statusOptions}
ref={selectInputRefPlan}
styles={singleStylesRowComp}
defaultValue={statusOptions.filter(
({ value }) => value.value === lead.disposition
)}
/>
and my array is
const statusOptions = [
{ value: "HOT", label: i18n._(t`HOT`) },
{ value: "WIP", label: i18n._(t`WIP`) },
{ value: "LOST", label: i18n._(t`LOST`) },
{ value: "DNC", label: i18n._(t`DNC`) },
{ value: "WON", label: i18n._(t`WON`) },
{ value: "NEW", label: i18n._(t`NEW`) },
];
I am testing against the value and not the label, so translation issues won't arise. when i log the response, value.value === 'NEW' and lead.disposition === 'NEW', however, the defaultValue will not set. I have also tried the prop value, as well as having read through the 6 or 7 similar posts. Is there a simple syntax error? or something else I am missing?
Here is a sandbox link that demonstrates the issue
The error is in your filter function. You decompose value, and then access value.value. This is undefined.
Instead, take the option argument without decomposition, and access option.value.
<Select
name="disposition"
classNamePrefix="select"
options={statusOptions}
ref={selectInputRefPlan}
styles={singleStylesRowComp}
defaultValue={statusOptions.filter((option) => option.value === lead.disposition)}
/>;
Related
The code is as follows
<TextField {...form.$("phone.countryCode").bind()} value={222} />
The form setup is as follows
{
name: "phone",
fields: [
{
name: "countryCode",
label: "Country Code:",
bindings: "TextField",
placeholder: "+",
rules: "required",
}
]
}
The value displays correctly in the textfield. But when i submit the form, it shows "required" error.
I assume field.input.onChange is not triggered when we set the value like this and hence the mobx field is not updated with the value.
Any idea on how to fix this?
Edit:
The value is a dynamic one based on the country selection. So you cannot set the value during initialise. That is why i had to go for this approach.
Don't need to override value on the TextField, mobx-react-form (I am assuming you are using it) can't possibly know that you are doing it. Just pass default value while initialising the form, like so:
const fields = [
{
name: "countryCode",
label: "Country Code:",
bindings: "TextField",
placeholder: "+",
rules: "required",
value: 'YOUR_DEFAULT_VALUE_HERE'
}
]
new MobxReactForm({ fields });
If the value depends on the other value then you can use useEffect, for example:
useEffect(() => {
// set countryCode value manually with needed value
FormModel.$("countryCode").set(country.code);
// Add needed deps
}, [country])
I have an issue,
I have a select control component, which has options, inside options I'm adding array of options by mapping array staticPosts.
My code:
<SelectControl
label={__("Choose Static Block Page to show above header", "pirezmeta")}
onChange={ (value) => props.onChangeStaticContent(value) }
options={props.staticPosts && props.staticPosts.map(post =>
({value: post.id, label: post.title}))}
value={props.staticContent}
/>
Everything is fine, except I want to add empty option first, something like: {value: 0, label: "No value"}
How can I do it, can you help me, please?
A lot is going on in that prop. I'd declare the array above, separately - include the first {value: 0, label: "No value"} item, then add in the other mapped items:
const options = [
{value: 0, label: "No value"},
...props.staticPosts?.map(
post => ({value: post.id, label: post.title})
)
];
// ...
<SelectControl
label={__("Choose Static Block Page to show above header", "pirezmeta")}
onChange={ (value) => props.onChangeStaticContent(value) }
options={props.staticPosts && options}
value={props.staticContent}
/>
You could also put the combined array into state on mount or when the props change.
I am attempting to use react-semantic-redux-form SelectField with the multiple options so a user can select multiple options and if there is one already set then this should show as checked.
I am also using redux-form with semantic0ui-react.
I am getting an error attempting to include multiple selections.
My include statement is:
import { SelectField } from "react-semantic-redux-form";
My state is:
state = {
relationships: ["some entry"],
relationshipOptions: [],
};
The element code is:
<Grid.Column>
<Field
component={SelectField}
name="relationships"
label="Your Relationships"
options={relationshipOptions}
multiple
placeholder="Select to add a relationship"
/>
I get the error as below
Dropdown `value` must be an array when `multiple` is set. Received type: `[object String]`.
in Dropdown
The way you have relationshipOptions is wrong, it is supposed array of objects,
const relationshipOptions = [
{ key: "single", value: "single", text: "single" },
{ key: "married", value: "married", text: "married" }
];
Here is the working example, Code Sandbox
Also if you have single, married in array. You can do something like this,
let relationshipOptions = ["single", "married"].map((x) => {
return ({
key: x,
value: x,
text: x
});
});
I'm using this package with React, and Im trying to use it as a "result dropdown" for a search. The problem is that I can't seem to get rid of the input field. There is a prop called isSearchable, however all it does is disable the input, it doesn't hide it. My fall back is to either fork it or use another package, but I would really like to get this one working.
I'm currently using it as,
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
];
<Select
hideSelectedOptions
menuIsOpen={true}
isSearchable={false}
options={options}
>
But this just renders:
Is it possible to get rid of the input, where it says "Select..."? There's also very little difference with the isDisabled prop, it seems a bit redundant.
Figured it out.
<Select
components={{
Control: () => null
}}
options={options}
/>
I am having problems with setting up grouped multiselect using material-ui in react. As material ui does not have such build-in component, I had to do it myself.
I am attaching codesandbox example of my code.
https://codesandbox.io/s/goofy-sun-2ffyv
The problem is that on onchange event the value I get I get is undefined.
Yet, I am excpected to get the value instead.
Any help and suggestion is appreciated.
According to Material-ui select docs:
The MenuItem elements must be direct descendants when native is false.
You are using div as direct element and MenuItems as children of div.
To fix this issue, i would recommend changing the structure of your data (I would use isDisabled without changing the structure, but I don't know if you want to use it for something else)
const posts = [
{
options: [
{
value: 'Hello',
label: 'Hello',
isOptGroup: true // -> the new flag
},
{
value: "3",
label: "Ойбек",
isDisabled: true
},
{
value: "2",
label: "Чинор",
isDisabled: true
},
{
value: "1",
label: "Озодбош",
isDisabled: true
}
]
}
];
And your MenuItem will be disabled based on that flag:
<MenuItem
key={option.value}
value={option.value}
className={classes.item}
disabled={option.isOptGroup}
>
<ListItemText primary={option.label} />
</MenuItem>