Develop Reference

Filter unique option values with Autocomplete component from Material UI

I want Autocomplete from Material UI to list in the drop-down only unique option values from a property of the objects in my list of objects.
In the example below, the drop-down renders a list with the values ['Color1', 'Color2', 'Color1', 'Color2'], however I want it to render only unique values, like ['Color1', 'Color2'].
Here is the list of objects:
options = [
{
id: 1,
name: 'Name1',
color: 'Color1'
},
{
id: 1,
name: 'Name2',
color: 'Color2'
},
{
id: 1,
name: 'Name3',
color: 'Color1'
},
{
id: 1,
name: 'Name4',
color: 'Color2'
},
]
And here is the Autocomplete complete component:
<Autocomplete
freeSolo
value={initialTasting}
options={options}
getOptionLabel={option => option.color}
filterOptions={(options, state) => options}
onChange={(e, value) => {setFieldValue('color', value.color)}}
renderInput={params => (
<TextField
{...params}
label={'Color'}
variant='outlined'
margin='dense'
fullWidth
/>
)}
/>
I left the rest of the code out, since it's too long. It uses Formik, Yup, has children components so on.
I guess I can achieve the result I'm looking for using the prop filterOptions, however, I can't make it. I'm too new to JavaScript..!
Thanks in advance.

What do you think about updating your options array like this?..
function getUniqueListBy(arr, key) {
return [...new Map(arr.map(item => [item[key], item])).values()]
}
const optionsUnique = getUniqueListBy(options, 'color');
...and then pass optionsUnique to the options parameter from <Autocomplete /> component

How to sync two dropdown lists with different display in React?

I have a list of countries, with key, value, text.
I would like to have two Dropdown (https://react.semantic-ui.com/modules/dropdown/) list, one shows the key, the other the text.
The goal is to allow to choose by key of by text (we can type in the dropdown); if I update one, the other is synchronized immediately.
How can I achieve this ?
<Dropdown
id='form-input-country'
label='Country'
placeholder='Select Country'
fluid
search
selection
options={countryISOOptions} // will show text
/>
<Dropdown
id='form-input-country'
label='Country'
placeholder='Select Country'
fluid
search
selection
options={countryISOOptions} // want to show key + want to sync in both direction
/>
I import countryISOOptions which looks like:
export const countryISOOptions = [
{key: 'AF', value: '4', text: 'Afghanistan'},
{key: 'AL', value: '8', text: 'Albania'},
{key: 'DZ', value: '12', text: 'Algeria'},
...

Maintain 2 option arrays. One for text and other for keys(derived from the first options array). Then maintain just one state and an onChange for both dropdowns and you will be fine.
See working copy of your code.
See code snippet:
import React, { useState } from "react";
import { Dropdown } from "semantic-ui-react";
import "./styles.css";
const countryISOOptions = [
{ key: "AF", value: "4", text: "Afghanistan" },
{ key: "AL", value: "8", text: "Albania" },
{ key: "DZ", value: "12", text: "Algeria" }
];
const countryKeys = countryISOOptions.map(({ key, value }) => ({
value,
text: key
}));
export default function App() {
const [text, setText] = useState("");
const onChangeTextDropdown = (e, d) => {
console.log("onChangeTextDropdown", e.target.value);
console.log("d", d);
setText(d.value);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Dropdown
id="form-input-countryz"
label="Country"
placeholder="Select Country - text"
value={text}
onChange={onChangeTextDropdown}
fluid
search
selection
options={countryISOOptions} // will show text
/>
<Dropdown
id="form-input-country"
label="Country"
placeholder="Select Country - key"
value={text}
onChange={onChangeTextDropdown}
fluid
search
selection
options={countryKeys} // want to show key + want to sync in both direction
/>
</div>
);
}

If you are using controlled version, then each Dropdown is a typical Inputthat supports two props called value and onChange. I'll use hook in the following example,
const [value1, setValue1] = setState('')
const [value2, setValue2] = setState('')
const onValue1Change = e => {
const value = e.target.value
setValue1(value)
if (value === 'key') setValue2('country')
}
return (
<div>
<Dropdown
value={value1}
onChange={onValue1Change}
...
/>
<Dropdown
value={value2}
...
/>
</div>
)

Material ui Autocomplete: can tags be created on events aside from 'Enter' events?

I am currently working with the freesolo Autocomplete and my particular use case requires tags to be created when commas or spaces follow the input text. Autocomplete currently creates tags on the Enter event, but I don't think there is anything built into Autocomplete yet that supports tag creation on any other event. I'm wondering if I'm missing anything, or if I'm not, how could I approach this problem?
Currently, I'm attempting to use the onInputChange attribute in Autocomplete to capture the string coming in. I check that string for commas and spaces, and on a successful find of one of those characters I manually fire off the Enter event using some native JS code. This works in some cases, but not in all cases and accounting for all cases is becoming tedious. This approach seems like it's prone to a lot of issues, and I'm not convinced it's the best way to go about implementing tag creation on different events. Looking for some thoughts. Thanks
onInputChange attribute usage:
<Autocomplete
multiple
freeSolo
filterSelectedOptions
id="auto-complete"
options={foo.map(bar => bar.name)}
ref={autoRef}
onInputChange={(e, value) => {
createTagOnEvent(value);
}}/>
Searching through input for commas and spaces and firing off Enter event manually:
const createTagOnEvent = (bar) => {
if (pattern.test(bar)) {
const ke = new KeyboardEvent("keydown", {bubbles: true, cancelable: true, keyCode: 13});
autoRef.current.dispatchEvent(ke);
}
};

Below is the approach I would recommend.
There are two main aspects to the approach:
Use a "controlled" input approach for the Autocomplete so that you have full control over the current value.
Specify the onKeyDown handler for the TextField input via params.inputProps.onKeyDown with appropriate logic for adding the new value.
import React from "react";
import TextField from "#material-ui/core/TextField";
import Autocomplete from "#material-ui/lab/Autocomplete";
export default function Tags() {
const [value, setValue] = React.useState([top100Films[13]]);
const handleKeyDown = event => {
switch (event.key) {
case ",":
case " ": {
event.preventDefault();
event.stopPropagation();
if (event.target.value.length > 0) {
setValue([...value, event.target.value]);
}
break;
}
default:
}
};
return (
<div style={{ width: 500 }}>
<Autocomplete
multiple
freeSolo
id="tags-outlined"
options={top100Films}
getOptionLabel={option => option.title || option}
value={value}
onChange={(event, newValue) => setValue(newValue)}
filterSelectedOptions
renderInput={params => {
params.inputProps.onKeyDown = handleKeyDown;
return (
<TextField
{...params}
variant="outlined"
label="filterSelectedOptions"
placeholder="Favorites"
margin="normal"
fullWidth
/>
);
}}
/>
</div>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
// ... many more options
];
Here's a Typescript version:
/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "#material-ui/core/TextField";
import Autocomplete, { RenderInputParams } from "#material-ui/lab/Autocomplete";
interface ObjectOption {
title: string;
year: number;
}
type Option = ObjectOption | string;
interface MyInputProps {
onKeyDown: (event: object) => void;
}
interface MyParams extends RenderInputParams {
inputProps: MyInputProps;
}
export default function Tags() {
const [value, setValue] = React.useState([top100Films[13]]);
const handleKeyDown = event => {
switch (event.key) {
case ",":
case " ": {
event.preventDefault();
event.stopPropagation();
if (event.target.value.length > 0) {
setValue([...value, event.target.value]);
}
break;
}
default:
}
};
return (
<div style={{ width: 500 }}>
<Autocomplete
multiple
freeSolo
id="tags-outlined"
options={top100Films}
getOptionLabel={option => {
if (typeof option === "string") {
return option;
}
return option.title;
}}
value={value}
onChange={(event, newValue) => setValue(newValue)}
filterSelectedOptions
renderInput={(params: MyParams) => {
params.inputProps.onKeyDown = handleKeyDown;
return (
<TextField
{...params}
variant="outlined"
label="filterSelectedOptions"
placeholder="Favorites"
margin="normal"
fullWidth
/>
);
}}
/>
</div>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films: ObjectOption[] = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
// ... many more options
];

As answered here, just use the autoHighlight flag:
<Autocomplete autoHighlight {...} />
It will highlight the first option by default, so pressing enter will select it.

Can I specify a Divider or Header in Semantic UI React's options array for the dropdown component?

I am working with ReactJS and using SemanticUI for ReactJS to style the front end,
Is it possible to specify a header or divider from within the options array of objects for a dropdown component?
I get the impression from the documentation that this is not supported yet.

I solved this by changing to object in the options array to have more properties (which allow you to customise the content):
{
text: "YouGov Filters",
value: "yougov-header",
content: <Header content="YouGov Filters" color="teal" size="small" />,
disabled: true
},
It's probably not the ideal way to achieve what I want because I have to set disabled to true (I don't want it to be a selectable option) which means it adopts the greyed out 'disabled' style. I tried to counter this by specifying a color for the header which resulted in the disabled style being applied over the teal colour, not perfect but it will do for now.

Another workaround is to do it by map array:
const options = [
{
text: "note",
icon: 'sticky note outline',
description: 'test',
},
{
divider: true
},
{
text: "task",
icon: 'calendar check outline',
description: 'test',
},
];
return (
<Dropdown className='multicontent__button' text='add new' button>
<Dropdown.Menu>
<Dropdown.Header icon='tags' content='Tag Label' />
{options.map((option, i) => {
if (option.divider === true) return (<Dropdown.Divider key={i}/>);
return (
<Dropdown.Item
key={i}
text={option.text}
icon={option.icon}
description={option.description}
action={option.action}
onClick={this.handleOption}
/>
);
})}
</Dropdown.Menu>
</Dropdown>
);

Mr B's solution is genius. And it can be cleaner with a little modification of his:
function FragmentWithoutWarning({key, children}) {
// to get rid of the warning:
// "React.Fragment can only have `key` and `children` props."
return <React.Fragment key={key}>{children}</React.Fragment>;
}
// then just:
{
as: FragmentWithoutWarning,
content: <Header content="YouGov Filters" color="teal" size="small" />
}
Since <React.Fragment /> is not able to capture any event, you even don't have to disable the item.

React ES6: Get selected value in dropdown list using semantic UI

Given the following data, how can I get the birds name and push it (Using the add button) to a new array to be displayed in another div (Using react es6)? So basically I want a user to click a bird from the semantic dropdown and display it in a different div for example shown below. This is probably simple but I can't seem to find a way to it when I'm using Semantic elements. Do I need to use onChange?
I need to to do this in a class I am exporting (react) (just havent shown the class/constructor/state definitions)
<div>
<p>How can i display 'Bird_Name' here?<p>
</div>
addClick = () => {
}
const {
Button,
Container,
Divider,
Dropdown,
Header,
Message,
Segment,
} = semanticUIReact
const birds = [
{
"value": "001",
"Bird_Name": "Eurasian Collared-Dove"
},
{
"value": "002",
"Bird_Name": "Bald Eagle"
},
{
"value": "003",
"Bird_Name": "Cooper's Hawk"
},
];
const options = birds.map(({ ID, Bird_Name }) => ({ value: ID, text: Bird_Name }))
const App = () => (
<Container>
<Divider hidden />
<Header as='h1'>Semantic-UI-React</Header>
<Dropdown
placeholder='Select...'
selection
search
options={options}
renderLabel={({ Bird_Name }) => 1}
/>
<button className="ui primary button add" onClick={this.addClick}>Add</button>
</Container>
)
// ----------------------------------------
// Render to DOM
// ----------------------------------------
const mountNode = document.createElement('div')
document.body.appendChild(mountNode)
ReactDOM.render(<App />, mountNode)

So, what you basically want is the onChange function which will display.
<Dropdown
placeholder='Select...'
selection
search
options={options}
renderLabel={({ Bird_Name }) => 1}
onChange={this.getBird}
/>
and make a getBird function
getBird = (event, {value}) => {
console.log(value);
let bird_name = event.target.textContent;
console.log(bird_name);
}
The value and text variable in the getBird function are basically the value and bird_name of the selected bird from the dropdown.