Two Column component width dropdown gets blank after changing width

Created on 28 April 2025, 15 days 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?

Production build 0.71.5 2024