[BUG] Dropdown options not rendering on the UI even though it is generated

[malavika-menon]

Describe your context

Python Version -> 3.8.18

poetry show | grep dash gives the below packages:

dash                      2.7.0        A Python framework for building reac...
dash-bootstrap-components 1.5.0        Bootstrap themed components for use ...
dash-core-components      2.0.0        Core component suite for Dash
dash-html-components      2.0.0        Vanilla HTML components for Dash
dash-prefix               0.0.4        Dash library for managing component IDs
dash-table                5.0.0        Dash table

• if frontend related, tell us your Browser, Version and OS

  • OS: MacOSx (Sonoma 14.3)
  • Browser: Chrome (also tried on Firefox and Safari)
  • Version: 121.0.6167.160 (Official Build) (x86_64)

Describe the bug

I have a multi-dropdown that syncs up with the input from a separate tab to pull in the list of regions associated with a country. A particular country, GB, when selected does not seem to populate the dropdown options. The UI element created was written to stdout which lists the elements correctly, but it does not render on the UI itself.

stdout printout is as follows:

Div([P(children='Group A - (Control)', style={'marginBottom': 5}),
 Dropdown(options=[
    {'label': 'Cheshire', 'value': 'Cheshire'}, 
    {'label': 'Leicestershire', 'value': 'Leicestershire'}, 
    {'label': 'Hertfordshire', 'value': 'Hertfordshire'}, 
    {'label': 'Surrey', 'value': 'Surrey'}, 
    {'label': 'Lancashire', 'value': 'Lancashire'}, 
    {'label': 'Warwickshire', 'value': 'Warwickshire'}, 
    {'label': 'Cumbria', 'value': 'Cumbria'}, 
    {'label': 'Northamptonshire', 'value': 'Northamptonshire'}, 
    {'label': 'Dorset', 'value': 'Dorset'}, 
    {'label': 'Isle of Wight', 'value': 'Isle of Wight'}, 
    {'label': 'Kent', 'value': 'Kent'}, 
    {'label': 'Lincolnshire', 'value': 'Lincolnshire'}, 
    {'label': 'Hampshire', 'value': 'Hampshire'}, 
    {'label': 'Cornwall', 'value': 'Cornwall'}, 
    {'label': 'Scotland', 'value': 'Scotland'}, 
    {'label': 'Berkshire', 'value': 'Berkshire'}, 
    {'label': 'Gloucestershire, Wiltshire & Bristol', 'value': 'Gloucestershire, Wiltshire & Bristol'}, 
    {'label': 'Durham', 'value': 'Durham'}, 
    {'label': 'Rutland', 'value': 'Rutland'}, 
    {'label': 'Northumberland', 'value': 'Northumberland'}, 
    {'label': 'West Midlands', 'value': 'West Midlands'}, 
    {'label': 'Derbyshire', 'value': 'Derbyshire'}, 
    {'label': 'Merseyside', 'value': 'Merseyside'}, 
    {'label': 'East Sussex', 'value': 'East Sussex'}, 
    {'label': 'Northern Ireland', 'value': 'Northern Ireland'}, 
    {'label': 'Oxfordshire', 'value': 'Oxfordshire'}, 
    {'label': 'Herefordshire', 'value': 'Herefordshire'}, 
    {'label': 'Staffordshire', 'value': 'Staffordshire'}, 
    {'label': 'East Riding of Yorkshire', 'value': 'East Riding of Yorkshire'}, 
    {'label': 'South Yorkshire', 'value': 'South Yorkshire'}, 
    {'label': 'West Sussex', 'value': 'West Sussex'}, 
    {'label': 'Tyne and Wear', 'value': 'Tyne and Wear'}, 
    {'label': 'Buckinghamshire', 'value': 'Buckinghamshire'}, 
    {'label': 'West Yorkshire', 'value': 'West Yorkshire'}, 
    {'label': 'Wales', 'value': 'Wales'}, 
    {'label': 'Somerset', 'value': 'Somerset'}, 
    {'label': 'Worcestershire', 'value': 'Worcestershire'}, 
    {'label': 'North Yorkshire', 'value': 'North Yorkshire'}, 
    {'label': 'Shropshire', 'value': 'Shropshire'}, 
    {'label': 'Nottinghamshire', 'value': 'Nottinghamshire'}, 
    {'label': 'Essex', 'value': 'Essex'}, 
    {'label': 'Greater London & City of London', 'value': 'Greater London & City of London'}, 
    {'label': 'Cambridgeshire', 'value': 'Cambridgeshire'}, 
    {'label': 'Greater Manchester', 'value': 'Greater Manchester'}, 
    {'label': 'Suffolk', 'value': 'Suffolk'}, 
    {'label': 'Norfolk', 'value': 'Norfolk'}, 
    {'label': 'Devon', 'value': 'Devon'}, 
    {'label': 'Bedfordshire', 'value': 'Bedfordshire'}], 
    value=[], 
    multi=True, 
    id={'role': 'experiment-design-geoassignment-manual-geodropdown', 'group_id': 'Group-ID1234'})])

Expected behavior

When the country GB is selected, I expect the relevant options to be populated in the dropdown that can be selected. The code below:

def get_geos(self, all_geos):
    element = html.Div(
                    [
                        html.P("TEST", style={"marginBottom": 5}),
                        dcc.Dropdown(
                            id={"role": self.prefix("dropdown"), "group_id": "1234"},
                            multi=True,
                            value=[],
                            searchable=True,
                            options=[{"label": g, "value": g} for g in all_geos],
                        ),
                    ]
                )
    print(element) # Print output is posted above showing that the callback is working fine. But it is not rendering correctly on the front end
    return element

Screen Recording

Screen.Recording.2024-02-08.at.11.15.10.am.mov

[Adam]

hi @malavika-menon
Can you please share a minimal reproducible example so we can replicate the error in the video locally?