Bug: JS error in flexible fields

[Levdbas]

          Great work! Sadly, it doesn't solve the following: when having a flexible field layout with a svg icon picker field in it, I am unable to remove the field. This is the JS error I'm getting (screenshot):

Originally posted by @Dennisscholten in https://github.com/smithfield-studio/acf-svg-icon-picker/issues/1#issuecomment-2149132365

[Levdbas]

Hi @Dennisscholten,

Moved your issue to a seperate issue. Can you share a Json export of your field configuration?

[Dennisscholten]

Sure, here's a json export of a group that I used to test this:

{
    "key": "group_6660211ac93b5",
    "title": "Icon picker test",
    "fields": [
        {
            "key": "field_666021191a35f",
            "label": "Test flexible",
            "name": "test_flexible",
            "aria-label": "",
            "type": "flexible_content",
            "instructions": "",
            "required": 0,
            "conditional_logic": 0,
            "wrapper": {
                "width": "",
                "class": "",
                "id": ""
            },
            "layouts": {
                "layout_6660212d60dbb": {
                    "key": "layout_6660212d60dbb",
                    "name": "test_layout",
                    "label": "Test layout",
                    "display": "block",
                    "sub_fields": [
                        {
                            "key": "field_6660213b1a360",
                            "label": "Test text field",
                            "name": "test_text_field",
                            "aria-label": "",
                            "type": "text",
                            "instructions": "",
                            "required": 0,
                            "conditional_logic": 0,
                            "wrapper": {
                                "width": "",
                                "class": "",
                                "id": ""
                            },
                            "default_value": "",
                            "maxlength": "",
                            "placeholder": "",
                            "prepend": "",
                            "append": ""
                        },
                        {
                            "key": "field_666021541a361",
                            "label": "Test icon picker",
                            "name": "test_icon_picker",
                            "aria-label": "",
                            "type": "icon-picker",
                            "instructions": "",
                            "required": 0,
                            "conditional_logic": 0,
                            "wrapper": {
                                "width": "",
                                "class": "",
                                "id": ""
                            },
                            "initial_value": ""
                        }
                    ],
                    "min": "",
                    "max": ""
                }
            },
            "min": "",
            "max": "",
            "button_label": "Nieuwe regel"
        }
    ],
    "location": [
        [
            {
                "param": "page_template",
                "operator": "==",
                "value": "home.php"
            }
        ]
    ],
    "menu_order": 0,
    "position": "normal",
    "style": "default",
    "label_placement": "top",
    "instruction_placement": "label",
    "hide_on_screen": "",
    "active": true,
    "description": "",
    "show_in_rest": 0,
    "modified": 1717576059
}

[Levdbas]

Hi @Dennisscholten , I tested this field group in ACF 6.3 and I dont receive such an error. Can you share your WordPress version, ACF version and can you confirm that you have version 3.0 of this plugin fork active and have uninstalled the old version?

[Dennisscholten]

WP Version: 6.5.3 ACF Pro Version: 6.3.1 Advanced Custom Fields: SVG Icon Picker: 3.0.0

I tried the following:

• Using a default theme (Twenty Twenty Four) • Deactivating all plugins but ACF and ACF SVG Icon Picker • Deactivating all other ACF Groups except the one with the test fields

How to reproduce:

• Create a flexible field, inside the flexible field add a layout with an SVG icon picker field • Go to a page and add a layout with an SVG icon picker field • Now try to remove the layout and it gives a JS error

Other layouts work fine.

It also happens on nested flexible layouts, where I'm unable to delete the parent layout when a child has the svg icon field.

I'm not sure if this is an isolated case, but I manage around 90 websites and they're all broken unless I revert to ACF 6.2.

Hope this helps, I can arrange a login to my test WP installation, if needed.

[Levdbas]

Hi @Dennisscholten , 3.1.0 is now out. Please mind that the field name has been changed from icon-pciker to svg_icon_picker. You will have to fix that in your config but after that, it should work. Please report back to me to confirm!

[Dennisscholten]

Changing the config did the trick, thanks a lot!

[Levdbas]

Great!