# Custom Component with noWrap "true" cause focus issue

**URL:** <https://forum.builder.io/t/custom-component-with-nowrap-true-cause-focus-issue/817>\
**Category:** Technical Questions\
**Tags:** react\
**Created:** [August 1, 2021, 6:39am UTC](https://forum.builder.io/t/custom-component-with-nowrap-true-cause-focus-issue/817 "2021-08-01T06:39:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![frank.hsu](https://avatars.discourse-cdn.com/v4/letter/f/2bfe46/32.png) [@frank.hsu](https://forum.builder.io/u/frank.hsu)\
**Post date:** [August 1, 2021, 6:39am UTC](https://forum.builder.io/t/custom-component-with-nowrap-true-cause-focus-issue/817/1 "2021-08-01T06:39:33Z")

</div>

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. )

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [August 17, 2021, 2:21am UTC](https://forum.builder.io/t/custom-component-with-nowrap-true-cause-focus-issue/817/2 "2021-08-17T02:21:53Z")

</div>

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:

```auto
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' }]
})

```

---

<div class="post-metadata">

**Author:** ![frank.hsu](https://avatars.discourse-cdn.com/v4/letter/f/2bfe46/32.png) [@frank.hsu](https://forum.builder.io/u/frank.hsu)\
**Post date:** [August 19, 2021, 4:32am UTC](https://forum.builder.io/t/custom-component-with-nowrap-true-cause-focus-issue/817/3 "2021-08-19T04:32:26Z")

</div>

thks, it works after pass the attributes.

---

<div class="post-metadata">

**Author:** ![neri](https://avatars.discourse-cdn.com/v4/letter/n/da6949/32.png) [@neri](https://forum.builder.io/u/neri)\
**Post date:** [May 2, 2023, 8:53am UTC](https://forum.builder.io/t/custom-component-with-nowrap-true-cause-focus-issue/817/4 "2023-05-02T08:53:10Z")

</div>

> [@steve](#):
>
> `{...props.attributes} `

Hi steve, thank you for you detailed answer.  
Im having trouble passing the “builder-id” to my custom component. I tried your solution of passing `{...props.attributes}` and it does pass the class names but the `builder-id` attribute is filtered out for some reason.

Im using next.js and my custom component is a styled component. I fear next.js filters it.  
Do you have an idea how to pass the `builder-id` attribute to the component without it being filtered?

```auto
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} // 'builder-id' exists in props.attributes but is filtered out and isn't present in the DOM
    className={`my-class ${props.attributes.className}`}
   />
)

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

```

---

<div class="post-metadata">

**Author:** ![neri](https://avatars.discourse-cdn.com/v4/letter/n/da6949/32.png) [@neri](https://forum.builder.io/u/neri)\
**Post date:** [May 4, 2023, 1:32pm UTC](https://forum.builder.io/t/custom-component-with-nowrap-true-cause-focus-issue/817/5 "2023-05-04T13:32:06Z")

</div>

This solution works well for my problem:

```auto
    <Component
      {...props}
      {...props.attributes}
      ref={
        (el: HTMLElement | null) => {
          attributes &&
          Object.entries(attributes).forEach(([attributeName, attributeValue]) => {
            if (attributeName.startsWith("builder-")) {
              el?.setAttribute(attributeName, attributeValue as string); // Here i set the "builder-*" attributes on the element
            }
          });
        }
      }
    >
      {children}
    </Component>

```

---

<div class="post-metadata">

**Author:** ![Brent9997](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@Brent9997](https://forum.builder.io/u/Brent9997)\
**Post date:** [August 25, 2023, 11:22am UTC](https://forum.builder.io/t/custom-component-with-nowrap-true-cause-focus-issue/817/6 "2023-08-25T11:22:42Z")

</div>

adding {…props.attributes} seems to defeat the purpose of the noWrap option. I just get it wrapped again. I need to get rid of the ability of editors to override my CSS with the inline builder styles

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 26, 2023, 8:25am UTC](https://forum.builder.io/t/custom-component-with-nowrap-true-cause-focus-issue/817/7 "2023-09-26T08:25:20Z")

</div>

Hello @Brent9997,

To get rid of default editor styles, you can possibly disable **Use default styles** from Settings → Advanced Settings → Editor

 ![Screenshot 2023-09-06 at 1.04.45 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/3031094f20e12eeb75e5068f26d93dcf1388953a.jpeg)

```auto
const ButtonTwilio = (props) => {
  const ref = React.useRef();

  return (
    <Button
      ref={(el: HTMLElement | null) => {
        console.log("el", props.attributes);
        el?.attributes &&
          Object.entries(props?.attributes).forEach(
            ([attributeName, attributeValue]) => {
              if (attributeName !== "className") {
                el?.setAttribute(attributeName, attributeValue as string);
              } 
            }
          );
      }}
      variant={props.variant}
      size={props.size}
    >
      {props.children}
    </Button>
  );
};

```