Использую redux, react и библиотеку material-ui Selectors Код компонента ниже. Работает так, в items подгружается список на отображение, handleChange - сообщает в хранилище изменения о новом выборе и т.д.
import React from "react";
import {withStyles} from "material-ui/styles";
import {MenuItem} from "material-ui/Menu";
import Chip from "material-ui/Chip";
import CancelIcon from "@material-ui/icons/Cancel";
import Input from "material-ui/Input";
import Select from "react-select";
import Typography from "material-ui/Typography";
const ITEM_HEIGHT = 48;
const styles = theme => ({
// Autocomplete styles
"@global": {
".Select-control": {
display: "flex",
alignItems: "center",
border: 0,
height: "auto",
background: "transparent",
"&:hover": {
boxShadow: "none",
},
},
".Select-multi-value-wrapper": {
flexGrow: 1,
display: "flex",
flexWrap: "wrap",
},
".Select--multi .Select-input": {
margin: 0,
},
".Select.has-value.is-clearable.Select--single > .Select-control .Select-value": {
padding: 0,
},
".Select-noresults": {
padding: theme.spacing.unit * 2,
},
".Select-input": {
display: "inline-flex !important",
padding: 0,
height: "auto",
},
".Select-input input": {
background: "transparent",
border: 0,
padding: 0,
cursor: "default",
display: "inline-block",
fontFamily: "inherit",
fontSize: "inherit",
margin: 0,
outline: 0,
},
".Select-placeholder, .Select--single .Select-value": {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
display: "flex",
alignItems: "center",
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.pxToRem(16),
padding: 0,
},
".Select-placeholder": {
opacity: 0.42,
color: theme.palette.common.black,
},
".Select-menu-outer": {
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[2],
position: "absolute",
left: 0,
top: `calc(100% + ${theme.spacing.unit}px)`,
width: "100%",
zIndex: 2,
maxHeight: ITEM_HEIGHT * 7.7,
},
".Select.is-focused:not(.is-open) > .Select-control": {
boxShadow: "none",
},
".Select-menu": {
maxHeight: ITEM_HEIGHT * 7.7,
overflowY: "auto",
},
".Select-menu div": {
boxSizing: "content-box",
},
".Select-arrow-zone, .Select-clear-zone": {
color: theme.palette.action.active,
cursor: "pointer",
height: 21,
width: 21,
zIndex: 1,
},
".Select-aria-only": {
position: "absolute",
overflow: "hidden",
clip: "rect(0 0 0 0)",
height: 1,
width: 1,
margin: -1,
},
autocomlete: {
paddingBottom: 30,
marginRight: 20,
fontWeight: 200,
paddingRight: 20,
width: 750,
},
},
});
/* eslint-disable react/prop-types */
const Option = ({isFocused, isSelected, onFocus = () => {}, children = [], onSelect = () => {}, option}) => {
const handleClick = event => onSelect(option, event);
return (
<MenuItem
onFocus={onFocus}
selected={isFocused}
onClick={handleClick}
component="div"
style={{fontWeight: isSelected ? 500 : 400}}
>
{children}
</MenuItem>
);
};
/* eslint-disable react/prop-types */
const SelectWrapped = (props) => {
const {classes, ...other} = props;
return (
<Select
optionComponent={Option}
noResultsText={<Typography>No results found</Typography>}
valueComponent={(valueProps) => {
const {value, children, onRemove} = valueProps;
const onDelete = (event) => {
event.preventDefault();
event.stopPropagation();
onRemove(value);
};
if (onRemove) {
return (
<Chip
tabIndex={-1}
label={children}
className={classes.chip}
deleteIcon={<CancelIcon onTouchEnd={onDelete}/>}
onDelete={onDelete}
/>
);
}
return <div className="Select-value">{children}</div>;
}}
{...other}
/>
);
};
/* eslint-disable react/prop-types */
const Autocomplete = ({items = [], handleChange, selectedItems = [], multi, changeSelectionActionName}) => (
<div className={styles.autocomlete}>
<Input
fullWidth
inputComponent={SelectWrapped}
value={selectedItems}
onChange={handleChange(changeSelectionActionName)}
placeholder="Выберите из списка или начните вводить название"
name="react-select-chip"
inputProps={{
multi,
classes: styles,
instanceId: "react-select-chip",
id: "react-select-chip",
options: items.map(item => ({value: item.id, label: item.name})),
}}
/>
</div>);
export default withStyles(styles)(Autocomplete);
Работает нормально на первый взгляд, но первый раз, при попытке выбрать элемент из выпадающего списка, список отображается, но в консоль попадает сообщение об ошибке. warning.js:1 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.
Check the render method of `Select`.
in Option (created by Select)
in div (created by Select)
in div (created by Select)
in div (created by Select)
in Select (created by SelectWrapped)
in SelectWrapped (created by Input)
in div (created by Input)
in Input (created by WithStyles(Input))
in WithStyles(Input) (created by Autocomplete)
in div (created by Autocomplete)
in Autocomplete (created by WithStyles(Autocomplete))
in WithStyles(Autocomplete) (created by DivisionReport)
in span (created by DivisionReport)
in div (created by DivisionReport)
in DivisionReport (created by WithStyles(DivisionReport))
in WithStyles(DivisionReport) (created by OvertimesReport)
in div (created by Typography)
in Typography (created by WithStyles(Typography))
So, how to remove this warning message from console?