Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The controlled/uncontrolled behavior is determined at the mount time.

Current Behavior

The controlled/uncontrolled behavior is determined at each render.

Steps to Reproduce (for bugs)

Look at the source code.

Context

@kgregory Raised this issue in #9523. It's important to notice that the Input component is the only component behaving this way. It's no the case for: input, Checkbox, Switch, Radio, ExpansionPanel and Tooltip.

Your Environment

Tech
Version

Material-UI
v1.0.0-beta.24

React
v16.2.0

Issue 2:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The GridListTile should look the same when wrapped in a component as when it's not wrapped.

Current Behavior

Wrapping GridListTile in a component collapses it, it does not fill out up the space it should.

Steps to Reproduce (for bugs)

Here is a demo: https://stackblitz.com/edit/react-ershgc

Output here: https://react-ershgc.stackblitz.io/

Context

I would like to be able to have onclick pass back the id of the clicked GridListTile without using a wrapper arrow function for the GridListTile onClick prop. Using a wrapper function created a new function on every re-render of the main component, which causes an update to each GridListTile.

Also having a wrapper component for GridListTile enables me to optimize renders with PureComponent/shouldComponentUpdate/onlyUpdateForKeys etc.

Your Environment

Tech
Version

Material-UI
1.0.0-beta.29

React
Latest

browser
Chrome, Mac, latest

I am not sure if StackBlitz deletes demo apps after some period of time so pasting the code here too, just in case:

/*
Experiment with moving GridListTile to it's own component.

The reason for wanting this is to avoid using anonymous functions in the
GridListTile props. Generating functions makes every GridListTile update
on every update to 'list', shouldComponent update or PureComponent will
also re-render since the passed onClick function technically differs from
the previous one.
*/

import React, {Component} from 'react';
import {render} from 'react-dom';
import GridList, {GridListTile} from 'material-ui/GridList';

const list = ['id1', 'id2', 'id3'];

class App extends Component {
handleClick = (event, id) => {
console.log('id', id);
};

render() {
return (
<GridList cellHeight={192} cols={3}>
{list.map(id => (
<GridListTile
// An anonymous event handler is needed to be able to pass
// 'id' to the actual event handler
onClick={event => this.handleClick(event, id)}
key={id}
cols={1}
style={{background: 'red'}}
>
{id}
</GridListTile>
))}

{/*
Wrapping GridListTile in a separate component solves the event
handler issue, but this does also not render as expected
*/}
{list.map(id => <MyTile key={id} id={id} onClick={this.handleClick} />)}
</GridList>
);
}
}

class MyTile extends Component {
handleClick = event => {
// Passing the id without using an anonymous function in the JSX props
this.props.onClick(event, this.props.id);
};

render() {
return (
<GridListTile cols={1} style={{background: 'green'}} onClick={this.handleClick}>
{this.props.id}
</GridListTile>
);
}
}

render(<App />, document.getElementById('root'));