Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow dcc.Dropdown with multi=True to stay open when item is selected #2820

Open
WWakker opened this issue Mar 29, 2024 · 5 comments · May be fixed by #2821
Open

Allow dcc.Dropdown with multi=True to stay open when item is selected #2820

WWakker opened this issue Mar 29, 2024 · 5 comments · May be fixed by #2821
Labels
feature something new P3 backlog

Comments

@WWakker
Copy link

WWakker commented Mar 29, 2024

When you have a dropdown with multi=True, a user might want to select multiple items at the same time. However, dcc.Dropdown closes when you select one item, and to select another item you have to open it again.

It would be much more user-friendly if dcc.Dropdown can stay open when an item is selected, or at least have it as an option. With rshiny this is already possible, see the multi-select example here.

There seems to be a way to hack the javascript code to get it working, but a proper solution would be to have a boolean option in dcc.Dropdown, e.g. close_on_select, or multi_close_on_select.

@TillerBurr
Copy link
Contributor

Duplicate of #2669.
This is something that I was working on when I have time.

@WWakker
Copy link
Author

WWakker commented Mar 29, 2024

I forgot I already had opened that issue!

@TillerBurr Do you see any difficulties in the implementation? I don't know how far you got already but I could also try to have a look.

@TillerBurr TillerBurr linked a pull request Mar 29, 2024 that will close this issue
9 tasks
@TillerBurr
Copy link
Contributor

TillerBurr commented Mar 29, 2024

@WWakker No worries. It actually wasn't that bad implementing. The only thing that was slightly challenging were the integration tests, mainly making sure the menu stayed open.

I had forgotten that I had started thinking on this a couple weeks ago and this issue reminded me that I should figure out those tests.

@gvwilson gvwilson self-assigned this Jun 12, 2024
@celia-lm
Copy link

Related! #1934

@gvwilson gvwilson removed their assignment Aug 2, 2024
@gvwilson gvwilson added P3 backlog feature something new labels Aug 13, 2024
@gvwilson gvwilson changed the title [Feature Request] Allow dcc.Dropdown with multi=True to stay open when item is selected Allow dcc.Dropdown with multi=True to stay open when item is selected Aug 13, 2024
@antons-soundskrit
Copy link

The dropdown should revert to the previous scroll state when reopened, so that you don't have to scroll all the way back down to the position you were. This is especially useful when you have hundreds of dropdown options. The dropdown with multi=False does this, but with multi=True, the scroll always reverts to the top. This is even more convenient than leaving the dropdown open after a selection and should be standard behavior.

A workaround to revert back to the previous scroll position for a dropdown with multi=True is to create a assets/scroll.js file, then put the ids of your dash dropdowns in document.querySelector("#id1,#i2,...") below.

var scrollPos = 0;

document.addEventListener('DOMContentLoaded', () => {
    
    function setup_click_listener() {
        var dropdownContainer = document.querySelector("#dropdown, #dropdown-directionality-measurements"); // put dash dropdown ids here
        if (dropdownContainer == null) { // Try again until the dropdown exists
            setTimeout(setup_click_listener, 200);
            return;
        }
        dropdownContainer.addEventListener('click', function() {
            dropdownMenu = dropdownContainer.querySelector('.Select-menu-outer');
            dropdownGrid = dropdownMenu.querySelector('.ReactVirtualized__Grid');
            dropdownGrid.scrollTop = scrollPos;
            dropdownGrid.onscroll = (event) => {
                scrollPos = dropdownGrid.scrollTop;
            }
        });
    }
    setup_click_listener();
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature something new P3 backlog
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants