As a React beginner, I am utilizing the Patternfly Dropdown component. However, I am encountering an issue when attempting to use multiple instances of the same dropdown on a single page. Upon clicking them, the options inside do not open as expected.
I am seeking guidance on how to modify the existing code to enable the usage of multiple dropdowns on the same page.
STATE:
//dropdown menu
this.onToggle = isOpen => {
this.setState({
isOpen
});
};
this.onSelect = event => {
this.setState({
isOpen: !this.state.isOpen
});
this.onFocus();
};
this.onFocus = () => {
const element = document.getElementById('toggle-id-1');
element.focus();
};
Under render()
const dropdownItems = [
<DropdownItem key="action1" component="button">
1 Hour
</DropdownItem>,
<DropdownItem key="action2" component="button">
1 Day
</DropdownItem>,
<DropdownItem key="action3" component="button">
1 Week
</DropdownItem>,
<DropdownItem key="action4" component="button">
Never
</DropdownItem>,
];
Under Return
<Dropdown
onSelect={this.onSelect}
toggle={
<DropdownToggle id="toggle-id-1" onToggle={this.onToggle}>
Dropdown
</DropdownToggle>
}
isOpen={isOpen}
dropdownItems={dropdownItems}
autoFocus={false}
/>
<Dropdown
onSelect={this.onSelect}
toggle={
<DropdownToggle id="toggle-id-2" onToggle={this.onToggle}>
Dropdown
</DropdownToggle>
}
isOpen={isOpen}
dropdownItems={dropdownItems}
autoFocus={false}
/>