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>
Related
I am using ag grid auto complete editor ag-grid-autocomplete-editor on my react application. I have a requirement where I want to show the entire list of options when the ag grid cell is clicked and when the text is cleared on the field using backspace.
I have achieved the first requirement by setting the showOnFocus as true but seems like it doesn't work when I cleared the text from the cell editor.
My cell edit looks like as below -
fieLd: MY NAME_FIELD; headerName: MY_NAME, width: 400.
colId: MY_FIELD,
cellEditor: AutocompleteSelectCellEditor,
cellEditorParams:{
cellRenderer: "rowDropDownCellRenderer"
required: true,
selectData: MyOptions
placeholder: "Select"
autocomplete: {
showOnFocus: true
fetch: function(cellEditor: any, text: any, callBack: any, trigger: any){
if(myOptions.find(c => c.label === text || text.length === 0)){
var suggestions = myOptions;
callBack(suggestions)
} else {
varSuggestionNew = myOptions.filter(c => c.label.includes(text))
callback(varSuggestionNew)
}
}
}
}
MyOptions looks like as below -
[
{ value: 0, label: "this" }
{ value: 1, label: "is" },
{ value: 2, label: "sparta" }
{ value: 3, label: "yolo" },
]
So here one thing I noticed, fetch method is not called when I clear the text from ag grid field. That's the reason the options are not showing. Is there a way I can achieve this?
working example - https://stackblitz.com/edit/ag-grid-autocomplete-editor?file=index.js
I have a requirement to add custom data attributes to the Fluent UI dropdown.
In javascript/html I could add them like this.
option data-passign="true" data-minpt="3" data-maxpt="6" value="7">Data Quality</option
Can someone help me achieve this in Fluent UI + React?
In FluentUI/React, it's much easier than that, no need for data- attributes, you can just add your custom data directly to the options list (and get it back in the event handlers, or as the selected value if you are using "controlled" scenario). Means, if you don't have a specific requirement to store additional item data in the HTML data attributes for "something else" (like ui-automation tool), then you could go with something like this (note the data property):
const YourComponent = (props) => {
const options = [
{ key: '7',
text: 'Data Quality',
data: { passign: true, minpt: 3, maxpt: 7 }
},
{ key: '42',
text: 'Weather Quality',
data: { passign: true, minpt: 100500, maxpt: 42 }
},
];
const onChange = (evt, item) => {
const itemData = item.data;
console.log(item.key, item.text, itemData);
};
return (
<Dropdown
label="Select something"
options={options}
defaultSelectedKey='7'
onChange={onChange}
/>
);
}
If you want a "controlled" control instead (this one is "uncontrolled"), check out the sample page for the Dropdown:
https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
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)}
/>;
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}
/>