Py.Cafe

amward/

dmc-pr-383-demo-multi-select

DMC PR #383 Demo: Multi Select with Debounce

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
44
45
46
import dash_mantine_components as dmc
from dash import Dash, dcc, _dash_renderer, callback, Input, Output

_dash_renderer._set_react_version("18.2.0")

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

component = dmc.Stack([
    dmc.Title("DMC PR #383 Demo: Multi Select with Debounce", order=2),
    dmc.Text(
        """
        This demo shows debounce=True with a dmc.MultiSelect component.
         Notice that the value updates only when the MultiSelect input loses focus 
        (like pressing Enter, Tab, or clicking outside).

        Try editing the example by setting debounce=False (which is the default).  
        You can also set debounce to the number of milliseconds to wait before updating.

        """
    ),

    dmc.Box(id="out"),
    dmc.MultiSelect(
        id="select",
        data=["a", "b", "c"],
        value=["a"],
        debounce=True,
    ),
],p=20)



app.layout = dmc.MantineProvider([component])


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


if __name__ == "__main__":
    app.run(debug=True)