Отговорих на това в няколко тематични теми тук и тук за повече информация относно сложностите и предупрежденията, но тук е същината на подхода.
Трябва да зададете ширината на менюто да бъде автоматично, така че да се разтяга, за да пасне на съдържанието му.
onMount, стилизирайте менюто (височина: 0, видимост: скрито) и отворете менюто с вътрешния ref метод
С подложката onMenuOpen използвайте функция, която чака 1ms, вземете ширината на listMenuRef и затворете/нулирайте menuIsOpen.
С изчислената ширина вече можете да зададете ширината на ValueContainer.
Резултатът може да се види тук на този кодов пясъчник
Кодът е публикуван по-долу...
import React, { useState, useRef, useEffect } from "react";
import Select from "react-select";
const App = (props) => {
const selectRef = useRef();
const [menuIsOpen, setMenuIsOpen] = useState();
const [menuWidth, setMenuWidth] = useState();
const [isCalculatingWidth, setIsCalculatingWidth] = useState(false);
useEffect(() => {
if (!menuWidth && !isCalculatingWidth) {
setTimeout(() => {
setIsCalculatingWidth(true);
// setIsOpen doesn't trigger onOpenMenu, so calling internal method
selectRef.current.select.openMenu("first");
setMenuIsOpen(true);
}, 1);
}
}, [menuWidth, isCalculatingWidth]);
const onMenuOpen = () => {
if (!menuWidth && isCalculatingWidth) {
setTimeout(() => {
const width = selectRef.current.select.menuListRef.getBoundingClientRect()
.width;
setMenuWidth(width);
setIsCalculatingWidth(false);
// setting isMenuOpen to undefined and closing menu
selectRef.current.select.onMenuClose();
setMenuIsOpen(undefined);
}, 1);
}
};
const styles = {
menu: (css) => ({
...css,
width: "auto",
...(isCalculatingWidth && { height: 0, visibility: "hidden" })
}),
control: (css) => ({ ...css, display: "inline-flex " }),
valueContainer: (css) => ({
...css,
...(menuWidth && { width: menuWidth })
})
};
const options = [
{ label: "Option 1", value: 1 },
{ label: "Option 2", value: 2 },
{ label: "Option 3 is a reallly realllly long boi", value: 3 }
];
return (
<div>
<div> Width of menu is {menuWidth}</div>
<Select
ref={selectRef}
onMenuOpen={onMenuOpen}
options={options}
styles={styles}
menuIsOpen={menuIsOpen}
/>
</div>
);
};
export default App;
person
BornReady
schedule
09.12.2020