[BUG] Textfield and TextArea fields placeholder is not customizable

Environment

Please provide as many details as you can:

• Hosting type
  • [] Local deployment
    • Version:
• Formio.js version: 4.13.10
• Frontend framework: None
• Browser: Chrome
• Browser version: 104.0.5112.101

Steps to Reproduce

1. Edit textfield component editForm
2. Modify label placeholder to “Hello” for example

Expected behavior

in Form builder when you drag textfiled component, you should see “Hello” as a placeholder of label input

Observed behavior

textfield and textarea components display respectively “Text Field” and “Text Area” as default values not even as placeholders

Example

same issue for checkbox component too (and probably the rest of components)

Here is the code snippet for customizing the textfiled component editForm:

            Formio.Components.components.textarea.editForm = function () {
                return {
                    components: [
                        {
                            type: 'tabs', key: 'tabs',
                            components: [
                                {
                                    key: 'display', label: 'Weergave', weight: 0,
                                    components: [
                                        {type: 'textfield', key: "label", label: 'Label', placeholder: 'Label'},
                                        {type: 'input', key: 'placeholder', label: 'Placeholder'},
                                        descriptionComponent,
                                    ],
                                },
                                {
                                    key: 'validation', label: 'Validatie', weight: 10,
                                    components: [
                                        {type: 'checkbox', key: 'validate.required', label: 'Vereist'},
                                    ]
                                }
                            ],
                        },
                    ],
                };
            };

[akhossanX]

Can we communicate in slack. I have few points to discuss??

Join me on discord @akhossan#3635

[akhossanX]

@PrathyushaModala No you are getting it wrong, I guess you have to take a look first at components customization in the documentation, Think of it is if we want to create a new custome component that is not offered by formio, in this case we need to define the schema, template (how the component UI looks like) and the editForm which is our matter here editForm is controlling the popup dialog UI when you drag the component to the editing area. the layout of that dialog is customized by defining a new function that returns an array of objects, each object is a field that is going to be edited inside the dialog. for example say we created a new custome component, and we call it mycustomfield , so the editForm of this new field is going to be customized the following way: Formio.Components.component.mycustomefield = function () { return { components: [ {type: "textfield", key: "label", label: "Label", placeholder: "my placeholder goes here"}, .... ] } } Now the problem appears in this level, the wording “my placeholder goes here” is not going to appear in the editForm, “Field input” or “Text Area” is what is going to be there instead.