Two Column component width dropdown gets blank after changing width

Created on 28 April 2025, about 1 month ago

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

๐Ÿ› Bug report
Status

Active

Version

0.0

Component

Page builder

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @mayur-sose
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium wim leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    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? ๐Ÿ™

  • 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
            }
        }
    }
    
  • First commit to issue fork.
  • ๐Ÿ‡ซ๐Ÿ‡ฎFinland lauriii Finland

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

  • Merge request !1018Issue #3521465 Cast all values to strings โ†’ (Open) created by lauriii
  • ๐Ÿ‡ซ๐Ÿ‡ฎFinland lauriii Finland
  • ๐Ÿ‡ฆ๐Ÿ‡บAustralia larowlan ๐Ÿ‡ฆ๐Ÿ‡บ๐Ÿ.au GMT+10

    Can we add/expand an e2e test for this?

  • ๐Ÿ‡ง๐Ÿ‡ชBelgium wim leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

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

    Clarifying issue title.

  • ๐Ÿ‡ซ๐Ÿ‡ฎFinland lauriii Finland

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

Production build 0.71.5 2024