Issue with Search Text Reset in Dash Mantine Components MultiSelect

Dash Python
1

Hi everyone,

I’m currently working on a project using Dash and the Mantine Components library, and I’ve encountered an issue with the MultiSelect component. When I use the search functionality to filter the list of options and then select an item, the search text is immediately cleared/reset. This is disrupting the user experience as the user has to retype the search text if they want to select multiple items from the filtered list.

Here’s a quick summary of the issue:

  • What I’m using : Dash Mantine Components (dmc.MultiSelect) v0.14
  • Expected behavior : After selecting an item from the filtered list, the search text remains so users can continue selecting items.
  • Actual behavior : The search text is cleared/reset as soon as an item is selected.

In this GIF, I’m trying to select all occurrences of “Infraction” from the list. However, as you can see, I have to retype the searchValue multiple times to retrieve the occurrences, which makes the process cumbersome.
searchvalue_cleared_dmc

Here’s my implementation of MultiSelect :

def get_dropdown(filter_placeholder: str, filter_id: int, values: list, values_bis: list) -> dmc.MultiSelect:
    '''
    Fonction renvoyant un élément Dash de liste déroulante
    - filtre_placeholder : chaine de caractère affichée nommant la liste déroulante
    - filter_id : id du filtre concerné
    - values : liste des valeurs présentent en options (affichée)
    - values_bis : liste des valeurs de chaque options
    '''

    return dmc.MultiSelect(
        id={'type': 'filter_dimension', 'index': filter_id},
        data=values,
        placeholder=filter_placeholder,
        value=values_bis,
        clearable=True,
        style={'width': '100%'},
        searchable=True,
        withScrollArea=True,
        comboboxProps={"transitionProps": { "transition": 'pop', "duration": 200 }},
        className="custom-multi-select",
        label=filter_placeholder
    )

Questions :

  1. Is there a built-in way to preserve the search text after a selection ?
  2. If not, does anyone have a workaround for this issue, such as managing searchValue with callbacks or another method ?
  3. Could this be considered for improvement in a future release ?

I’d love to hear any advice or best practices for solving this problem. Thanks in advance for your help !

Best regards,
Valentin.

1 Like
2

Hi @valentingcht

This would be a nice feature. The dmc.MultiSelect automatically clears the searchValue after an item is selected, but it should be possible to update it in a callback.

There was a bug that made that not possible, and I just did PR #441 to fix it. Below is a link to an app hosted on PyCafe that is based on the PR. Could you please try it and see if it works for your use-case? The app is editable, so feel free to make any changes to test it out. I could add this to the next release planned for this week.


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 PR 441: 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
1 Like