Problem with Input and Datalist with Pattern Matching Callback

Dash Python
1

Hello,

I’m trying to build an app where a user can select a set of options (from a dropdown), and I’d like to dynamically a html.Div element with an input and a Datalist for each of them.

So a pattern matching callback for the Datalist on a user starting to type, and generate a list of suggestion from an api call.

For that I would need to pass the element ID as an input for the Datalist element, but somehow I cannot do it, as I think the id for the list needs to be a string.

So, something like this

  
listx = ['item1', 'item2', 'item3']
  test_tab = dcc.Tab(
      label='Test tab', 
      children=[
          html.Div([
              dbc.InputGroup([       
                  dbc.InputGroupText(x),
                  dcc.Input(
                      id={
                          'type': 'test',
                          'index': x
                      },
                      type='text',
                      placeholder=x,
                      list={
                          'type': 'test-list',
                          'index': x
                      },
                  )
              ]),
              html.Datalist(
                  id={
                          'type': 'test-list',
                          'index': x
                      },
                  children=[]
              )
          ]) for x in listx 
      ]
  )

And the callback (ideally matching) would fill the datalist items.


@app.callback(
    Output({'type': 'test-list', 'index': MATCH}, 'children')
    Input({'type': 'test', 'index': MATCH}, 'value'),
)
def test_suggest_locs(x):
    return ([html.Option(value=item) for item in myAPIcall(x)]

Eventually, I could create all the datalists in advance (as I have the list), but it is a nightmare to deal with inputs that might not yet exist with the flexible callback signatures, like this.

Best regards,

Daniele

2

Hello @daniele,

On your callback, it looks like you have a syntax error and have a leading ‘(’.

Question, why are you using this as opposed to a dcc.Dropdown?

3

Hi jinnizor,

Yes, sorry, I wrote it down as an example without testing it.

My understanding is that a dcc.Dropdown would be the one to use for a given, hardcoded list of elements that changes rarely, but the search element gets updated every time the dcc.Input value changes, and the pool for that is too large and variable for that – e.g. 1000s of items to sort – , which is the reason for the API call to get 10 to populate suggestions.

Daniele

4

Since you are using an api to pull it, you can update the dcc.Drop-down options on input value change.

5

Hi,

I tried what you suggest, and it easily does what I require. I misunderstood the Dropdown strengths.

Thank you for your help!

Daniele

1 Like
6

Hello, I’m dealing with the exact same problem and found this post. You still cannot pass a dict into the ‘list’ argument. My use case does not allow for using a Dropdown. Any tips?

7

Hello @j15herman,

You can pass a dict into the list, if you cant do it in a straightforward way, you can just use json to stringify the data. However, in the above post, the OP didnt end up using dicts as variables ended up working for their need.

If you need to use dicts, you should pass a it like this: [{"label":"custom_name", "value": {your dict value}}]

8

Thanks for the quick response. Tried doing this and it didn’t work. wasn’t exactly sure if I was passing it right, so here’s a couple examples I tested: (note that this is processed inside of a list comprehension)

[dcc.Input(id=..., list=[{"label": "---SearchHelperContainer", "value": {"type": "---SearchHelper", "index": k}}]...) for k, v in possibleFilters.items()]
{"label": "---SearchHelperContainer", "value": {"type": "---SearchHelper", "index": k}}
[{"label": "---SearchHelperContainer", "value": '{"type": "---SearchHelper", "index": k}'}]
{"label": "---SearchHelperContainer", "value": '{"type": "---SearchHelper", "index": k}'}

These spit out the following error:

Invalid argument `list` passed into Input with ID "{"index":"-----_CLASSES","type":"---SearchFilter"}".
Expected `string`.
Was supplied type `object`. ##(or 'array' if wrapped in a list).
Value provided: 
{
  "label": "---SearchHelperContainer",
  "value": {
    "type": "---SearchHelper",
    "index": "-----_CLASSES"
  }
}

Also tried these:

json2.dumps({"label": "---SearchHelperContainer", "value": {"type": "---SearchHelper", "index": k}})
json2.dumps([{"label": "---SearchHelperContainer", "value": {"type": "---SearchHelper", "index": k}}])

Which didn’t give an error, but did not output any content. Where am I going wrong here?

9

You should be using options. :slight_smile: Not list

10

getting this error now

TypeError: The `dcc.Input` component (version 2.17.1) with the ID "{'type': '---SearchFilter', 'index': 'PRODUCTID'}" received an unexpected keyword argument: `options`
Allowed arguments: autoComplete, autoFocus, className, debounce, disabled, id, inputMode, list, loading_state, max, maxLength, min, minLength, multiple, n_blur, n_blur_timestamp, n_submit, n_submit_timestamp, name, pattern, persisted_props, persistence, persistence_type, placeholder, readOnly, required, selectionDirection, selectionEnd, selectionStart, size, spellCheck, step, style, type, value

Thanks for all your help!

A little more context: I am certain that the Datalists are being populated with properly formatted Options.

11

Sorry, it needs to be dcc.Dropdown didnt notice that.

12

My use case doesn’t allow that :frowning:

13

Why cant you use dcc.Dropdown?

You could use dash-mantine-components Select with searchable in order to find options.

If you need to use a datalist, then you need to follow these directions for the dcc.Input:

list (string; optional): Identifies a list of pre-defined options to suggest to the user. The value must be the id of a element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute’s value is hidden, checkbox, radio, file, or a button type.

14

The main reason is to optimize user experience. There are like 20 filtering options, so it’s going to look terrible and make no sense for users if I do it like that.

These are also generated based off of other callbacks, so it’s more things to keep track of. I had a similar pattern-matching situation earlier that was a nightmare to take care of.

15

dmc.Select seems like a good fit, but I am completely new to it, so I’m having trouble getting the options to display. Any idea what I’m doing wrong? Thanks again for the help.

*[dmc.Select(id={“type”: “—SearchFilter”, “index”: k}, description=v, searchable=True, data=—Uniques[k], limit=10, style={“margin”: “10px”, “margin-top”: “0px”, “minWidth”: “93%”}) for k, v in possibleFilters.items()]]

context: Calling —Uniques[k] for k, v returns the data I want when I call it earlier in the function.

Edit: It is actually rendering outside of the dbc.dropdownmenu that these dmc.select components populate.

16

You should be able to adjust where the dropdown is rendering with comboboxProps: {withinPortal: false}