multiselect-react-dropdown
multiselect-react-dropdown copied to clipboard
srigar
When clicking on the scrollbar on the dropdown selection, it automatically closes the dropdown
Trim.mov.zip I am currently using dropdown and whenever I am scrolling with the mouse, it is fine. However, whenever I use the mouse to click on the dropdown scroll bar to drag it down, the dropdown automatically closes it on itself. I can't figure out what is causing the issue here. Thanks in advance. I have attached a video as well for reference.
Seems it is working fine.. For reference https://drive.google.com/file/d/1ThJRGhmMFXC3UK1FDIsJKsMlGuGewTsO/view
We are experiencing the same problem. Running react-multiselect-dropdown v1.6.2. The below clip is on Chrome v87.0.4280.88 but we are experiencing the same thing on Firefox.
This component is being rendered with almost all default props:
<Multiselect
options={["beans", "cornbread", "carrots", "tomatoes", "pickles", "lasagna", "doughuts"]}
selectedValues={["fava beans", "a nice chianti"]}
isObject={false}
/>
Anyone have a workaround or a way to resolve this? We just discovered this issue as well, probably would never have even realized since I only use the mouse wheel for scrollables.
Any update on this issue please? Clicking on the scrollbar is closing the dropdown. It is happening when dropdown is used inside a modal.
Does anyone fix this bug? I'm getting the same. This issue only occurs if we are using a multi-select dropdown inside a modal.
I'm still seeing this bug as of version 2.0.21
I believe that clicking with the mouse pointer on the scroll bar in the optionContainer creates a focus change from the searchBox input, which closes the optionContainer.
I did a really hacky workaround but would appreciate a fix in the plugin.
This was for a class component.
I basically hijack the scroll event for the option container and force it to focus on the search input unless the selected values length changes, upon which I blur the input to close the option list. I did that because I want the option container to close on selection of an item, but if you don't care about that then you don't need to do that.
Example:
// in the class constructor for my search container component
constructor(props) {
this.multiselectRef = React.createRef();
this.selectedLength = 0;
this.dropdown = {};
}
// in component did mount
componentDidMount() {
window.setTimeout(()=>{
// I generate multiple search container components so I need to assign each one a unique id
// in the props if I want to be able to select a specific option container
const { searchId = '' } = this.props;
// save the element for later cleanup of event listener
this.dropdown = document.querySelector(`#${searchId} .optionContainer`);
// need this for forcing dropdown list close when selecting/removing values
this.selectedLength = this.multiselectRef?.current?.state?.selectedValues?.length;
this.dropdown.addEventListener('scroll', this.TEMPHACK_handleDropdownScroll);
}, 150);
}
// cleanup the event listener on component unmount
componentWillUnmount() {
this.dropdown.removeEventListener("scroll", this.TEMPHACK_handleDropdownScroll);
}
// define a class method so we can cleanup the event listener in the component will unmount method
TEMPHACK_handleDropdownScroll = () => {
/*
Really hacky hack to prevent focus from being lost on the search input when
the options list is manually scrolled by clicking on the scrollbar
which causes it to close due to focus change.
*/
if (!this.multiselectRef?.current?.state) {
return
}
// forcing focus might interfere with closing dropdown on selection so manually handling it
// otherwise we could just focus the search box all the time
if (this.selectedLength === this.multiselectRef.current.state.selectedValues.length) {
this.multiselectRef.current.searchBox.current.focus();
} else {
this.selectedLength = this.multiselectRef.current.state.selectedValues.length;
this.multiselectRef.current.searchBox.current.blur();
}
}
