Py.Cafe

amward/

dmc-pr-441-update-searchValue-in-callback

Demo of dmc PR 441 enable MultiSelect to keep searchVaue after selection

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

#  As requested on the forum:  https://community.plotly.com/t/issue-with-search-text-reset-in-dash-mantine-components-multiselect/89133


import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, html, dcc, Input, Output, State, callback
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)

component = dmc.MultiSelect(
    label="Pick your favorite libraries",
    data=["Pandas", "NumPy", "TensorFlow", "PyTorch"],
    searchable=True,
    w=400,
    id="select",
)


app.layout = dmc.MantineProvider([
    dcc.Store(id="search"),
    dmc.Title("Demo of dmc.MultiSelect searchValue: Keeping search text after item is selected", order=4, py="lg"),
    html.Div(id="out"),
    component
])

@callback(
    Output("search", "data"),
    Input("select", "searchValue")
)
def update(searchValue):
    return searchValue


@callback(
    Output("out", "children"),
    Output("select", "searchValue"),
    Input("select", "value"),
    State("search", "data")
)
def update(val,search):
    return f"You selected {val}", search