Request for dash mantine dmc.Select to have option for filtering to behave like dcc.Dropdown

Dash Python
1

I am migrating my dash app from dash-core-components/dash-bootstrap-components to use dash-mantine-components. So, dcc.Dropdown turns into dmc.Select. However, dmc.Select does not automatically clear the search string when I click the dropdown. Instead, it keeps the last selected value string and lets you append to it. dcc.Dropdown automatically clears the search string as soon as you start typing a new search string. I have tried updating the “searchValue” field to be “empty string” via a callback but that did not work. (Even if that did work, it would be great to have that filter logic be specifiable in the dmc.Select init. e.g. add a new field called “clearSearchOnOpen”). Is there any way to get dmc.Select to work like dcc.Dropdown so that when I click the dropdown and start typing to filter options, it automatically clears the search content rather than appending to the last value selected? This happens in DMC 0.15.2 and latest 2.1.0. Minimal reproducible code:

import dash
from dash import Dash, html, dcc
import dash_mantine_components as dmc
from dash import State, Output, Input, html, callback
from dash.exceptions import PreventUpdate

app = Dash(__name__)

my_btn = dmc.Button("Update SearchValue", variant="outline", id="btn_id")
my_dd = dcc.Dropdown(['NYC', 'MTL', 'SF'], 'NYC', id='demo-dropdown', 
        style={'width': '200px', "verticalAlign":"bottom", "display":"inline-block" }
        )
my_sel = dmc.Select(
            placeholder="Select one",
            id="select_id",
            value="pd",
            leftSectionPointerEvents="none",
            rightSectionPointerEvents="none",
            size="sm",
            searchable=True,
            searchValue=None,
            data=[
                {"value": "pd", "label": "Pandas"},
                {"value": "np", "label": "NumPy"},
                {"value": "tf", "label": "TensorFlow"},
                {"value": "torch", "label": "PyTorch"},
            ],
            w=200,
        )
my_grp = dmc.Group([my_btn, my_dd, my_sel])
my_layout = html.Div(children=[my_grp])
app.layout = dmc.MantineProvider(my_layout)

@callback(
    Output("select_id", "searchValue"),
    Input("btn_id", "n_clicks"),
    State("select_id", "searchValue")
)
def select_value(n_clicks, sVal):
    if n_clicks:
        ret_searchValue = ""
        print("\nReturning empty string for searchValue.")
    else:
        ret_searchValue = dash.no_update
    return ret_searchValue

if __name__ == "__main__":
    app.run()
2

Hi @vonf

Could you please open a feature request on our Github?

3

New feature request added. First time doing so!

4

Thanks for the feature request :tada:

Congrats on making your first GitHub issue! The next step is to do a pull request :nerd_face:

This one may not be a “good first issue” as it’s a little complicated. (My first PR was updating documentation.) If you ever want to give that a try, a good place to start is the dmc-docs since it’s just a dash app made with DMC components. Feel free to open issues there too-- even fixing minor things like typos is appreciated. I’d be happy to help in any way I can.

1 Like
5

This will be available in the next release (2.2.0) :tada:

1 Like