Disable "Link URL" data field for a custom component

[MattCarlotta]

We have a custom builder component in our NextJS codebase that allows our product team to drag and drop Builder components into it. However, this custom component in Builder has a “Link URL” data field that has been accidentally used by our product team, which wraps the entire component in an invisible clickable link (essentially hijacking click interactions).

Looking into the Builder types, I noticed that there’s a “noWrap” property that you can assign to custom components. However, when I add to this to our custom component and refresh the Builder preview, the component is no longer an editable layer in Builder.

If I set “noWrap: false”, the custom component is editable and I can drag Builder components on to it (like this custom headline text):

However, if I set “noWrap: true”, and refresh the Builder preview, then the “Link URL” is removed as a data field (which is what I want); however, the custom component is no longer an editable layer. If I delete the “This is a custom headline” Builder component layer, I’m not able to re-add it:

Is there another alternative to disabling the “Link URL” data field for custom components?

[garima]

Hi @MattCarlotta, Welcome to the Builder.io forum!

To use the noWrap option, you also must pass {…props.attributes} into your component. Can you see if that works for you and make the layer editable?

You can see an example here: builder/Input.tsx at main · BuilderIO/builder · GitHub

For your reference, you can find this information documented here: builder/Component.md at main · BuilderIO/builder · GitHub

[MattCarlotta]

Hi @garima, that was it! I didn’t realize the component required these style attributes to be applied to the wrapping component in order for it be editable in the preview. When I did that, it appears to be working. Thanks!