Custom components not showing the Input fields

Visual Editor Help
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
e.g. Builder.io: Visual Development Platform
Builder.io: Visual Development Platform

Builder public api key
bf5aeb09845647e5a8182770c0ca0fdc

What are you trying to accomplish
trying to use the on the pages

Screenshots or video link

image
image1399×715 53 KB

Code stack you are integrating Builder with
NextJs*

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

import React from 'react';
import { Builder } from '@builder.io/react';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const AccordionList = ({ items }) => (
  <div className="bg-white">
  {items && items.length > 0 ? (
  <Accordion type="single" collapsible className="w-full p-5">
    {items?.map((item, index) => (
      <AccordionItem key={index} value={item.value}>
          <AccordionTrigger>{item.title}</AccordionTrigger>
        <AccordionContent>{item.content}</AccordionContent>
        hello
      </AccordionItem>
    ))}
  </Accordion>
  ) : <h2>Add Items</h2> }
  </div> 
);

Builder.registerComponent(AccordionList, {
  name: 'AccordionList',
  inputs: [
    {
      name: 'items',
      type: 'list',
      subFields: [
        {
          name: 'value',
          type: 'text',
        },
        {
          name: 'title',
          type: 'text',
        },
        {
          name: 'content',
          type: 'richText',
        },
      ],
    },
  ],
});

export default AccordionList;
2

Hey @kalyan Builder.io has an inbuilt Accordion. You can refer to our documentation here . Make sure to install and import widgets in your project.

3

Hi @sheema,

I am encountering this issue not only with the Accordion but also with other components containing input fields. When I make any changes within the code in my local development environment, the field appears. However, upon refreshing the page, all the fields become hidden again.

4

Hey @kalyan I wasn’t able to reproduce the issue on my end. Would it be possible to share a loom reproducing the issue on your space? Also, have you tested the inbuilt Accordion? Are you facing the same issue there as well?

5

Hi @sheema

The inbuilt accordion works fine, but I need to create many other custom components as per my project requirements. I am facing same issue with other custom components as well.

Here is the link to the issue on Loom:

FYR, attaching the complete code of the component:

import React from 'react';
import { Builder } from '@builder.io/react';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const AccordionList = ({ items }) => (
  <div className="bg-white">
  {items && items.length > 0 ? (
  <Accordion type="single" collapsible className="w-full p-5">
    {items?.map((item, index) => (
      <AccordionItem key={index} value={item.value}>
          <AccordionTrigger>{item.title}</AccordionTrigger>
        <AccordionContent>{item.content}</AccordionContent>
        
      </AccordionItem>
    ))}
  </Accordion>
  ) : <h2>Add Items</h2> }
  </div> 
);

Builder.registerComponent(AccordionList, {
  name: 'AccordionList',
  inputs: [
    {
      name: 'items',
      type: 'list',
      subFields: [
        {
          name: 'value',
          type: 'text',
        },
        {
          name: 'title',
          type: 'text',
        },
        {
          name: 'content',
          type: 'richText',
        },
      ],
    },
  ],
});

export default AccordionList;
6

Hey @kalyan I have tested your custom code on my space as well as your space. It is working fine on both the spaces. Custom component input field| Builder.io - 5 April 2024 | Loom
Would you be able to confirm what SDK you are on?

7

Hi @sheema, I am using Next 14

8

Please share a screenshot of your package.json.

9 
{
  "name": "dd-website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@builder.io/dev-tools": "^0.2.24",
    "@builder.io/react": "^3.2.5",
    "@builder.io/sdk": "^2.2.2",
    "@builder.io/widgets": "^1.2.24",
    "@headlessui/react": "^1.7.18",
    "@heroicons/react": "^2.1.1",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "class-variance-authority": "^0.7.0",
    "classnames": "^2.5.1",
    "clsx": "^2.1.0",
    "lucide-react": "^0.349.0",
    "next": "^14.1.2",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^5.0.1",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.2",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "tailwindcss-animatecss": "^3.0.5"
  }
}
10

Hello @kalyan,

I suspect the issue could be because of radix-ui, can you try registering the component like below and see if that shows up the input list

Builder.registerComponent("AccordionList", {
  name: 'AccordionListTest',
  inputs: [
    {
      name: 'items',
      type: 'list',
      subFields: [
        {
          name: 'value',
          type: 'text',
        },
        {
          name: 'title',
          type: 'text',
        },
        {
          name: 'content',
          type: 'richText',
        },
      ],
    },
  ],
});

Additionally, you can try passing a default value and see if that helps

  inputs: [
    {
      name: 'tabs',
      type: 'list',
      subFields: [
        {
          name: 'label',
          type: 'text',
          defaultValue: 'New tab',
        },
        {
          name: 'content',
          type: 'uiBlocks',
          defaultValue: [],
        },
      ],
      defaultValue: [
        {
          label: 'Tab 1',
          content: [],
        },
      ],
    },
  ],
11

Hi @manish-sharma, with your suggested changes, I can see the input files, but the same component is showing twice on the list.

In my case, the Accordion list is not working, but Accordion list test shows the input fields. I want to get rid of the Accordion list. Kindly suggest a solution.

image

image
image1372×708 44.8 KB

12

Hello @kalyan,

To remove the Accordion list component, you can comment out the Builder.register code for it. Additionally, please verify the code for your Accordion list Redux-UI component, as it seems to be causing the issue.

We suggest importing the AccordionList component into the builder-registry.tsx file and then registering it with Builder using the code below:

Builder.registerComponent(AccordionList, {
  name: 'AccordionList',
  inputs: [
    {
      name: 'items',
      type: 'list',
      subFields: [
        {
          name: 'value',
          type: 'text',
        },
        {
          name: 'title',
          type: 'text',
        },
        {
          name: 'content',
          type: 'richText',
        },
      ],
    },
  ],
});
13

@manish-sharma @sheema thank you for the support.