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' },
]}
/>
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 have this piece of code really confused me. I'm using typescript with vue (vuetify) and I'm still pretty new with typescript.
I have an array of objects that I want to load as items into a vuetify combobox.
Array =[
{
subject: 'science',
difficulty: 'medium'
}
{
subject: 'math',
difficulty: 'hard'
}]
with having the subject as the one visible on the dropdown and the difficulty will the the value hidden behind the combobox
i know it needs to look like this
items: [
{ text: 'science', value: 'medium' },
{ text: 'math', value: 'hard' }];
so i can load it on the v-combobox like this
<v-combobox :items="items" />
can anyone help me on how to achieve this? much appreciated!
I did not understand your issue but a typical combobox should be look like this:
(define selectedItem as an empty array in your data and call this.selectedItem.text)
<v-combobox
v-model="selectedItem"
:items="items"
item-value="value"
item-text="text"
:return-object="true"
label="Select an item.."
outlined
clearable
>
</v-combobox>
Yes for load the contents of array you set items props and also item-value et item-text props like #Aurora did. Because you an array of objects, and the component need to know what will be the value and the display field.
I am using Office fabric Choice Group for my radio buttons. I would like to change the styling of part of text to bold, but the rest of text remains as normal font size. I am using onRenderField method but I have not successfully implemented yet.... I really appreciate any inputs!!
Final Goal for radio button text:
On: some additional explanation here
Example Code using onRenderField method:
options={[
{
key: 'On',
text: 'On: some additional explanation here',
onRenderField: (props, render) => {
return (
<span style={{fontWeight: 'bold'}}>
{render!(props)}
</span>
);
}
}
]}
The above code makes bold entire text like below:
On: some additional explanation here
There's an option that doesn't appear to be well-documented called onRenderLabel that will do what you need.
Using it looks like:
{
key: 'C',
text: 'Option C',
onRenderLabel: (p) => <span id={p.labelId} className="ms-ChoiceFieldLabel">Option C: only <strong>this part</strong> is bold</span>
}
The p in the callback is of type IChoiceGroupOptionProps and may be of use, though it's more likely that defining the entire render inline is easier. ( https://learn.microsoft.com/en-us/javascript/api/office-ui-fabric-react/ichoicegroupoptionprops?view=office-ui-fabric-react-latest )
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}
/>
In react-admin documentation the use of ReferenceArrayInput is for this kind of data structure:
{
id: 1,
groups: [1, 2, 3]
}
And then:
<ReferenceArrayInput source="groups" reference="groups" allowEmpty>
<SelectArrayInput optionText="name"/>
</ReferenceArrayInput>
Using a custom json data provider, it will be make this request:
https://example.com/api/groups/?ids=[1,2,3]
or if the API doesn't support WHERE IN, it will be do individual calls for each id:
https://example.com/api/groups/1
https://example.com/api/groups/2
https://example.com/api/groups/3
But if I have the following data structure:
{
id: 1,
name: "Pepito Perez",
groups: [
{ id: 1, name: "HR"},
{ id: 2, name: "IT"},
{ id: 3, name: "FINANCE"}
]
}
I have the name field already, so I don't want make additional requests.
When I go to the edit view react-admin performs almost 70 requests unnecessary.
How can I avoid that? there's a way to reuse the data?
Also is tricky use ReferenceArrayInput component with an array of objects, I have to add a nonsense format prop to make it works: format={v => (v ? v.map(i => (i.id ? i.id : i)) : [])}
Guess it's related to the first problem.
Thanks in advance!
If the choices is not meant to be fetched, ReferenceInput is not what you want. You need only a SelectInput with programmatic setted choices. You can achieve that with FormDataConsumer:
<FormDataConsumer>
{({ formData, ...rest }) =>
<SelectArrayInput
source="selectedGroups"
optionText="name"
choices={formData.groups}
{...rest}
/>
}
</FormDataConsumer>
Note a different source, probably setting as groups, equal to choices "source", after first selected group, would result in a re-render, letting choices values equal to the single selected group.
That's almost exactly the use case of FormDataConsumer in documentation:
https://marmelab.com/react-admin/Inputs.html#linking-two-inputs