Material-ui: customizing Select's Paper with a forwardRef looses style on the way

[raphaelbadia]

I'm trying to customize the Paper in the Select component, to add "clear" and "select all" buttons.
I need to pass props to my customized paper so I extracted it to a new component using forwardRef.

But when selecting an option, the menu looses its positioning attributes, and it goes on the top-left on my screen.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The Paper should not move

Current Behavior 😯

The paper moves.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/material-ui-responsive-table-butui

Context 🔦

I want to do this

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.1.3 |
| React | 16.8.6 |
| Browser | chrome Version 75.0.3770.100 (Official Build) (64-bit) |
| TypeScript | no |
| etc. | |

Thanks for the help if I'm mistaken !

[oliviertassinari]

@raphaelbadia You are creating a new component at each render. React will unmount and remount it. We don't handle that well. Using the same component seems to solve the issue: https://codesandbox.io/s/material-ui-responsive-table-rf87l.

[raphaelbadia]

But how can I pass props to my paper then ?

On Thu 4 Jul 2019 at 18:57, Olivier Tassinari [e-mail]
wrote:

Closed #16484 https://github.com/mui-org/material-ui/issues/16484.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mui-org/material-ui/issues/16484?email_source=notifications&email_token=AAOQIPHUIVIIYRZSFOZLGK3P5YTY3A5CNFSM4H55B2GKYY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOSKYQZXA#event-2461076700,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAOQIPBHYK5AICR7VCBDAX3P5YTY3ANCNFSM4H55B2GA
.

[oliviertassinari]

Like this?

    <Select
      multiple
      value={personName}
      onChange={handleChange}
      input={<Input id="select-multiple" />}
      MenuProps={{
        PaperProps: {
          Foo: 'Foo', 
          component: B
        }
      }}
    >

[raphaelbadia]

Oh it works perfectly, thanks a lot !