Home App Docs Blog Github

Custom Component with noWrap "true" cause focus issue

I add the custom react component and setup the meta noWrap “true”.
When i edit the page, the custom component can not be selected if this attribute setup. ( i can just use the layer to focus this component. )

Hi @frank.hsu - you need to be sure to forward props.attributes attributes to your noWrap component in order for it to be selectable. Builder passes things down like props.attributes.className that must be included for selecting and editing to work, like below:

import { TextField } from '@material-ui/core'

export const BuilderTextField = props => (
  // Important: Builder.io must add a couple classes and attributes via props.attributes
  // Important: If you add your own classes do it after ...props.attributes 
  <TextField 
    variant={props.variant} 
    {...props.attributes} 
    className={`my-class ${props.attributes.className}`}
   />
)

Builder.registerComponent(BuilderTextField, {
  name: 'TextField',
  noWrap: true, // Important!
  inputs: [{ name: 'variant', type: 'string' }]
})

thks, it works after pass the attributes.