Dash DropDown closes after click-CodePudding

I don't want my dropdown to close after choosing a value, I want to it to stay opened on my page. I'm using dcc.Dropdown

dcc.Dropdown(id='job-type', options=self.options, placeholder='Select one or more Event(s)', value=self.job_type, multi=True)

CodePudding user response：

Yes, there is indeed a specific dcc.Dropdown parameter "multi" which can be set to boolean True, and that should work to allow your users to select multiple options from the dropdown.

EDIT: Searching is enabled as default, so it's pretty fast and convenient to simply click the dropdown bar once to extend its options, either scroll and select with another mouse click (and then yes unfortunately an additional mouse click [by default behavior] is required to re-expand the list of options]) or, user can just begin typing the first letters of each option they want, and they will appear highlighted. So, typing text also re-expands the dropdown list. You can just press enter to add any highlighted option from the dropdown, and then continue typing for the next selection because the cursor's focus will have remained in the dropdown component text search field. It may be possible to hack/override the default CSS/JS behavior of the menu automatically closing after each selection, but it may be a bit tricky. I could try and help figure that out with you if that's what you really think is your necessary desired functionality for your UX.

Here's some example code which I hope may help you, I'll provide the mock data and (some) of the custom CSS I used too (that is just pure aesthetics though and not required for proper functionality, of course):

Mock Data

A local file called "jobs.csv", tab-delimited, with the following contents:

code    options job_type
13-2011.00  Accountants and Auditors        Business and Financial Operations
27-2011.00  Actors  Arts, Design, Entertainment, Sports, and Media
15-2011.00  Actuaries   Computer and Mathematical
29-1291.00  Acupuncturists  Healthcare Practitioners and Technical
55-1011.00  Air Crew Officers   Military Specific
23-1022.00  Arbitrators, Mediators, and Conciliators    Legal
17-1011.00  Architects, Except Landscape and Naval  Architecture and Engineering
19-2011.00  Astronomers Life, Physical, and Social Science
33-3011.00  Bailiffs    Protective Service
51-3011.00  Bakers  Production
39-5011.00  Barbers Personal Care and Service
15-2099.01  Bioinformatics Technicians  Computer and Mathematical
25-1042.00  Biological Science Teachers, Postsecondary  Educational Instruction and Library
19-1029.00  Biological Scientists, All Other    Life, Physical, and Social Science
19-4021.00  Biological Technicians  Life, Physical, and Social Science
19-1029.04  Biologists  Life, Physical, and Social Science
51-8013.03  Biomass Plant Technicians   Production
11-3051.04  Biomass Power Plant Managers    Management
15-2041.01  Biostatisticians    Computer and Mathematical
15-1299.07  Blockchain Engineers    Computer and Mathematical
47-2011.00  Boilermakers    Construction and Extraction

Dropdown Component

In your layout file:

html.Br(),
html.H2("Jobs"),
dcc.Dropdown(
    id="jobs-multi-dropdown",
    value=None,
    clearable=True,
    optionHeight=50,
    multi=True,
    options=[
        {"label": f"{job_title}", "value": f"{job_type}"}
        for (job_title, job_type) in zip(df_jobs.options, df_jobs.job_type)
    ],
    placeholder="—