Fixed menu height doesn't allow re-rendering with different menu items

[tschaub]

Because the menu height is calculated once and cached, if a dropdown menu component is re-rendered with a different set of menuItems, its height will be invalid.

Here is a sample dropdown that attempts to render lazily loaded items:

var React = require('react');
var mui = require('material-ui');

var items = [
  {text: 'First'},
  {text: 'Second'},
  {text: 'Third'}
];

var DropDownTest = React.createClass({

  getInitialState: function() {
    return {
      items: [{text: 'Loading items ...'}]
    };
  },

  componentDidMount: function() {
    setTimeout(this._onLoad, 2000);
  },

  render: function() {
    return (
      <mui.DropDownMenu menuItems={this.state.items}/>
    );
  },

  _onLoad: function(items) {
    this.setState({
      items: items
    });
  }

});

module.exports = DropDownTest;

[arathunku]

This is so annoying.

I've changed

        el.style.height = this._initialMenuHeight + 'px';

to:

        el.style.height = 'initial';

in src/js/menu.jsx and I'm still experimenting with it but so far works without problem in my case. Do you think I should submit PR with it?

[hai-cea]

The height is saved so that we can perform a height transition on the container. This is actually an expensive property to animate and comes with a performance cost. Maybe we should just remove this and use transform scale instead?

[pola88]

Hi guys,

I have the same problem, Did you find the way to do this?

Thanks in advance,

[bytesandwich]

I hard coded the same change as @arathunku and it makes the broken drop down menu (on css-in-js 2f1d412) work for me.

[hai-cea]

Fixed with #544

[jtdaugherty]

I just ran into this same problem in 0.7.5 and I'm curious to know when this patch will make it into, say, 0.8.1. (CC @travitch)

[jtdaugherty]

(Or, better yet, a bugfix release, 0.7.6.)