Overview

When editing a page, changing the column width in the Two Column component causes the select dropdown to go blank.

Steps to reproduce:

  1. Edit an Article
  2. Drag and drop the Two Column component onto the canvas.
  3. From the right-hand side properties panel, change the Column Width.
  4. Observe that after changing the width, the select dropdown becomes blank instead of showing the selected value.

Suggestion: The dropdown label currently shows as "Column Width," but it should be more specific:

  • Column One Width for the first column (width will change if you make changes in the second column's width).
  • Column Two Width for the second column (this dropdown needs to be created, and its value will change if you make changes in the first column's width).

Proposed resolution

User interface changes

CommentFileSizeAuthor
#2 Screen Recording 2025-04-29 at 2.51.27 PM.mov7.23 MBmayur-sose

Issue fork experience_builder-3521465

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mayur-sose created an issue. See original summary.

mayur-sose’s picture

mayur-sose commented
StatusFileSize
new Screen Recording 2025-04-29 at 2.51.27 PM.mov7.23 MB
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Component: Page builder » Internal HTTP API
Assigned: Unassigned » mayur-sose
Status: Active » Postponed (maintainer needs more info)

Definitely a bug! 👍 Thanks! 🙏

This is either a bug on the back-end or in the Redux-integrated field widgets. Can you please attach the request body that was sent to generate that form? 🙏

mayur-sose’s picture

mayur-sose commented

After drag and drop Two Column component :

{
    "layout": [
        {
            "nodeType": "region",
            "id": "content",
            "name": "Content",
            "components": [
                {
                    "slots": [
                        {
                            "id": "15e7961c-568a-429e-8be1-5c9bc6cda0fd/column_one",
                            "name": "column_one",
                            "nodeType": "slot",
                            "components": []
                        },
                        {
                            "id": "15e7961c-568a-429e-8be1-5c9bc6cda0fd/column_two",
                            "name": "column_two",
                            "nodeType": "slot",
                            "components": []
                        }
                    ],
                    "nodeType": "component",
                    "type": "sdc.experience_builder.two_column",
                    "uuid": "15e7961c-568a-429e-8be1-5c9bc6cda0fd"
                }
            ]
        }
    ],
    "model": {
        "15e7961c-568a-429e-8be1-5c9bc6cda0fd": {
            "name": "Two Column",
            "resolved": {
                "width": 25
            },
            "source": {
                "width": {
                    "expression": "ℹ︎list_integer␟value",
                    "sourceType": "static:field_item:list_integer",
                    "value": {
                        "value": 25
                    },
                    "sourceTypeSettings": {
                        "storage": {
                            "allowed_values": [
                                {
                                    "value": 25,
                                    "label": "25"
                                },
                                {
                                    "value": 33,
                                    "label": "33"
                                },
                                {
                                    "value": 50,
                                    "label": "50"
                                },
                                {
                                    "value": 66,
                                    "label": "66"
                                },
                                {
                                    "value": 75,
                                    "label": "75"
                                }
                            ]
                        }
                    }
                }
            }
        }
    },
    "entity_form_fields": {
        "changed": "1745920485",
        "body[0][summary]": "",
        "body[0][value]": "",
        "body[0][format]": "basic_html",
        "created[0][value][date]": "2025-04-29",
        "created[0][value][time]": "14:49:51",
        "field_image[0][display]": "0",
        "field_image[0][description]": "",
        "field_image[0][upload]": "",
        "field_xbt_telephone[0][value]": "",
        "field_xbt_textarea[0][value]": "",
        "field_xbt_textarea[0][format]": "basic_html",
        "field_xbt_textarea_summary[0][summary]": "Wild card up my sleeve",
        "field_xbt_textarea_summary[0][value]": "<p>Melting in a pot of thieves</p>",
        "field_xbt_textarea_summary[0][format]": "basic_html",
        "field_xbt_textfield[0][value]": "",
        "field_xbt_unlimited_text[0][value]": "",
        "field_xbt_unlimited_text[0][_weight]": "0",
        "field_xbt_uri[0][value]": "http://drupal.org",
        "moderation_state[0][current]": "",
        "moderation_state[0][state]": "published",
        "path[0][alias]": "",
        "path[0][source]": "/node/19",
        "path[0][langcode]": "en",
        "promote[value]": "1",
        "title[0][value]": "Bug Check",
        "uid[0][target_id]": "admin (1)",
        "revision_log[0][value]": ""
    }
}

After changing Column width value :

{
    "componentInstanceUuid": "26d053dc-0286-4981-ac04-5639bb3b6ca1",
    "componentType": "sdc.experience_builder.two_column",
    "model": {
        "source": {
            "width": {
                "expression": "ℹ︎list_integer␟value",
                "sourceType": "static:field_item:list_integer",
                "value": 50,
                "sourceTypeSettings": {
                    "storage": {
                        "allowed_values": [
                            {
                                "value": 25,
                                "label": "25"
                            },
                            {
                                "value": 33,
                                "label": "33"
                            },
                            {
                                "value": 50,
                                "label": "50"
                            },
                            {
                                "value": 66,
                                "label": "66"
                            },
                            {
                                "value": 75,
                                "label": "75"
                            }
                        ]
                    }
                }
            }
        },
        "resolved": {
            "width": 50
        }
    }
}
mayur-sose’s picture

mayur-sose commented
Assigned: mayur-sose » Unassigned
Status: Postponed (maintainer needs more info) » Needs work

jatingupta40 made their first commit to this issue’s fork.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Related issues: +#3523763: Select element values not displaying after change on block form

I created another issue which is likely a duplicate of this.

lauriii opened merge request !1018

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Needs work » Needs review
larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented
Component: Internal HTTP API » Redux-integrated field widgets
Status: Needs review » Needs work

Can we add/expand an e2e test for this?

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Title: Two Column component width dropdown gets blank after changing width » <select>s losing selection: Two Column SDC's "width", menu block's "number of levels to display"
Issue tags: +beta blocker

This is certainly a stable blocker, but feels like it causes enough brittleness/distrust that it should be a beta blocker?

Clarifying issue title.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Priority: Normal » Major
Issue tags: -beta blocker +stable blocker

I don't think we should block the release on this but we should try to get this fixed regardless.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented

This was filed before form elements were refactored to use native instead of Radix and I believe this is no longer an issue, and I was unable to reproduce the problem as reported.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Needs work » Closed (cannot reproduce)

Per #13