Fix dropdown minWidth issue

main
Jake Dexheimer 7 years ago
parent 034c35ca92
commit 8a814beed3

@ -59,10 +59,12 @@ class Dropdown extends Component {
render() {
const { button, color, list, selected, onChange } = this.props
const minWidth = calcMinWidth(button, selected, list)
return (
<Downshift
inputValue={this.state.inputValue}
render={renderDropdown({ button, color, list: this.state.itemsToShow, selected })}
render={renderDropdown({ button, color, list: this.state.itemsToShow, selected, minWidth })}
selectedItem={selected}
defaultHighlightedIndex={list.findIndex(it => it === selected)}
itemToString={item => item.name}
@ -73,7 +75,7 @@ class Dropdown extends Component {
}
}
const renderDropdown = ({ button, color, list, selected }) => ({
const renderDropdown = ({ button, color, list, minWidth, selected }) => ({
isOpen,
highlightedIndex,
setHighlightedIndex,
@ -85,10 +87,7 @@ const renderDropdown = ({ button, color, list, selected }) => ({
getItemProps
}) => {
return (
<DropdownContainer
{...getRootProps({ refKey: 'innerRef' })}
minWidth={minWidth(button, selected, list)}
>
<DropdownContainer {...getRootProps({ refKey: 'innerRef' })} minWidth={minWidth}>
<SelectedItem
getButtonProps={getButtonProps}
getInputProps={getInputProps}
@ -238,7 +237,7 @@ const ListItem = ({ children, color, isHighlighted, isSelected, ...rest }) => {
)
}
function minWidth(isButton, selected, list) {
function calcMinWidth(isButton, selected, list) {
const items = isButton ? [...list, selected] : list
return items.reduce((max, { name }) => {

Loading…
Cancel
Save