# 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:** 1\
**Showing post:** 2

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

```

---

_[View the full topic](https://forum.builder.io/t/custom-component-with-nowrap-true-cause-focus-issue/817)._