Material-ui: [DropDownMenu] Vertical alignment breaks between 16.4 and 16.6

[HenrikBechmann]

span followed by DropDownMenu both inside a div:

Versions

• Material-UI: 16.4 => 16.6
• React: 15.4
• Browser: Chrome (mac)

[HenrikBechmann]

I've hacked past it for now by giving the span two styles:

{
    verticalAlign:'25px',
    lineHeight:'48px',
}

[oliviertassinari]

I confirm, I'm wondering what happened. Any clue?

[HenrikBechmann]

Sorry, no clue, just came out of 'nowhere'

[oliviertassinari]

Looks like it was introduced by https://github.com/callemall/material-ui/pull/4755. I can't see an obvious fix. I'm wondering if we can't keep it like this.

[HenrikBechmann]

... looks like a trap.

re: leaving it like it is, note the idiosyncratic nature of the hack workaround above. Not really acceptable.

If there was some widget that could automatically vertically align elements, then maybe ok:

<AlignedInlineComponents>
   <span>something</span> <DropDownMenu ... />
</AlignedInlineComponent>

... but good luck with that! :-(

Maybe there's an elegant workaround pattern I'm not aware of. If so, that would be sort of ok, though requiring compensation for alignment as a side effect of one particular type of element is not really good either.

Glad you found the root cause though. That's progress!