I am currently implementing react-select in one of my projects. I need the wordWrap property to be set to "scroll". However, when the length of the options exceeds the menu width and I scroll to the right, the hover color does not fill the entire width.
To see a visual representation, you can check out the link: https://i.sstatic.net/gchJG.png
Below is the code snippet for reference. It has been sourced from https://codesandbox.io/s/modest-curie-etoj3 with some modifications made.
import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import "./styles.css";
function App() {
// Custom styles for react-select
const customStyles = {
control: (base, state) => ({
...base,
width: 300,
background: "#023950",
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
borderColor: state.isFocused ? "yellow" : "green",
boxShadow: state.isFocused ? null : null,
"&:hover": {
borderColor: state.isFocused ? "red" : "blue"
}
}),
menu: base => ({
...base,
width: 300,
borderRadius: 0,
hyphens: "auto",
marginTop: 0,
textAlign: "left",
wordWrap: "normal"
}),
menuList: base => ({
...base,
padding: 0
})
};
// Options for react-select dropdown
const options = [
{ label: "option 1 akjbalskej", value: 1 },
{ label: "option 2 akjbalskej", value: 2 },
{ label: "option 3 akjbalskej", value: 3 },
{ label: "option 4 akjbalskej", value: 4 },
{ label: "option 5 akjbalskej", value: 5 },
{ label: "supercalifragilisticexpialidocioussupercalifragilisticexpialidocioussupercalifragilisticexpialidocious", value: 6 }
];
return (
<div className="App">
<Select styles={customStyles} options={options} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
I'm still new to react and frontend development. Any assistance on this matter would be greatly appreciated. Thank you!