Can't use default value for more than one localized input field

Bugs
1

Builder only displays default value for the first localized input field and ignores default values for other localized input fields.

Builder content link

Builder public api key
52bbcd351c0d4a8e8a3b4cb29a2b4e90

What are you trying to accomplish
Localize input fields

Screenshots or video link

image
image3839×2033 468 KB

Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

Code stack you are integrating Builder with
NextJS

Reproducible code example
This is the JSON of the component obtained from the Builder:
{ "@type": "@builder.io/sdk:Element", "@version": 2, "id": "builder-e9cdcc4c8d6f499b8b36239dd7ab0c2a", "meta": { "localizedTextInputs": [ "Subtitle", "Button1Text", "Button2Text" ] }, "component": { "name": "SimpleHeroWithCta", "options": { "Button1Url": "https://mui.com/store/items/the-front-landing-page/", "Button2Url": "https://thefront.maccarianagency.com/docs/introduction", "Subtitle": { "@type": "@builder.io/core:LocalizedValue", "Default": "Build a beautiful, modern website with flexible, fully customizable, atomic MUI components." }, "Button1Text": { "@type": "@builder.io/core:LocalizedValue" }, "Button2Text": { "@type": "@builder.io/core:LocalizedValue" } } }, "responsiveStyles": { "large": { "display": "flex", "flexDirection": "column", "position": "relative", "flexShrink": "0", "boxSizing": "border-box", "marginTop": "20px" } } }

This is the component registration code that I use:
Builder.registerComponent(SimpleHeroWithCta, { name: "SimpleHeroWithCta", inputs: [ { name: "Subtitle", type: "text", localized: true, defaultValue: 'Build a beautiful, modern website with flexible, fully customizable, atomic MUI components.', }, { name: "Button1Url", type: "url", defaultValue: "https://mui.com/store/items/the-front-landing-page/", }, { name: "Button1Text", type: "text", localized: true, defaultValue: 'Purchase now', }, { name: "Button2Url", type: "url", defaultValue: "https://thefront.maccarianagency.com/docs/introduction", }, { name: "Button2Text", type: "text", localized: true, defaultValue: 'View documentation', } ], });

If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

2

Hello @mkolesnac,

I am happy to confirm that I was able to reproduce the issue you are experiencing thanks to the details and steps you have provided.
I will now discuss the issue internally in order to determine the next steps. Once I have further updates, I will get back to you.

Thanks for bringing this possible issue to our attention.

3

Hello @mkolesnac,

After conducting a thorough investigation, we’ve discovered that when using localized: true for inputs, the default values need to be passed as an object. Here’s an example that works:

Builder.registerComponent(SimpleHeroWithCta, {
  name: 'SimpleHeroWithCta',
  inputs: [
    {
      name: 'Subtitle',
      type: 'text',
      defaultValue:{
        '@type': '@builder.io/core:LocalizedValue',
        'Default': 'Build a beautiful, modern website with flexible, fully customizable, atomic MUI components.',
      },
      localized: true,
    },
    {
      name: 'Button1Text',
      type: 'text',
      defaultValue: {
        '@type': '@builder.io/core:LocalizedValue',
        'Default': 'Purchase now',
      },
      localized: true,
    },
    {
      name: 'Button1Url',
      type: 'url',
      defaultValue: 'https://mui.com/store/items/the-front-landing-page/',
    },
    {
      name: 'Button2Url',
      type: 'url',
      defaultValue: 'https://thefront.maccarianagency.com/docs/introduction',
    },
    {
      name: 'Button2Text',
      type: 'text',
      defaultValue: {
        '@type': '@builder.io/core:LocalizedValue',
        'Default': 'View Documentation',
        'en-de': 'View Documentation DE',
      },
      localized: true,
    },
  ],
})