fix PowerSelector to support both controlled & uncontrolled variants

src/components/views/elements/PowerSelector.js

@@ -34,6 +34,10 @@ module.exports = React.createClass({
 
     propTypes: {
         value: React.PropTypes.number.isRequired,
+        // if true, the <select/> should be a 'controlled' form element and updated by React
+        // to reflect the current value, rather than left freeform.
+        // MemberInfo uses controlled; RoomSettings uses non-controlled.
+        controlled: React.PropTypes.bool.isRequired,
         disabled: React.PropTypes.bool,
         onChange: React.PropTypes.func,
     },
@@ -98,7 +102,10 @@ module.exports = React.createClass({
         }
         else {
             select =
-                <select ref="select" value={ selectValue } onChange={ this.onSelectChange }>
+                <select ref="select"
+                        value={ this.props.controlled ? selectValue : undefined }
+                        defaultValue={ !this.props.controlled ? selectValue : undefined }
+                        onChange={ this.onSelectChange }>
                     <option value="User">User (0)</option>
                     <option value="Moderator">Moderator (50)</option>
                     <option value="Admin">Admin (100)</option>

src/components/views/rooms/MemberInfo.js

@@ -495,7 +495,7 @@ module.exports = React.createClass({
                         { this.props.member.userId }
                     </div>
                     <div className="mx_MemberInfo_profileField">
-                        Level: <b><PowerSelector value={ parseInt(this.props.member.powerLevel) } disabled={ !this.state.can.modifyLevel } onChange={ this.onPowerChange }/></b>
+                        Level: <b><PowerSelector controlled={true} value={ parseInt(this.props.member.powerLevel) } disabled={ !this.state.can.modifyLevel } onChange={ this.onPowerChange }/></b>
                     </div>
                 </div>
 

src/components/views/rooms/RoomSettings.js

@@ -352,7 +352,7 @@ module.exports = React.createClass({
         var PowerSelector = sdk.getComponent('elements.PowerSelector');
 
         var power_levels = this.props.room.currentState.getStateEvents('m.room.power_levels', '');
-        var events_levels = (power_levels ? power_levels.events : {}) || {};
+        var events_levels = (power_levels ? power_levels.getContent().events : {}) || {};
         var cli = MatrixClientPeg.get();
         var roomState = this.props.room.currentState;
         var user_id = cli.credentials.userId;
@@ -617,38 +617,38 @@ module.exports = React.createClass({
                 <div className="mx_RoomSettings_powerLevels mx_RoomSettings_settings">
                     <div className="mx_RoomSettings_powerLevel">
                         <span className="mx_RoomSettings_powerLevelKey">The default role for new room members is </span>
-                        <PowerSelector ref="users_default" value={default_user_level} disabled={!can_change_levels || current_user_level < default_user_level} onChange={this.onPowerLevelsChanged}/>
+                        <PowerSelector ref="users_default" value={default_user_level} controlled={false} disabled={!can_change_levels || current_user_level < default_user_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
                         <span className="mx_RoomSettings_powerLevelKey">To send messages, you must be a </span>
-                        <PowerSelector ref="events_default" value={send_level} disabled={!can_change_levels || current_user_level < send_level} onChange={this.onPowerLevelsChanged}/>
+                        <PowerSelector ref="events_default" value={send_level} controlled={false} disabled={!can_change_levels || current_user_level < send_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
                         <span className="mx_RoomSettings_powerLevelKey">To invite users into the room, you must be a </span>
-                        <PowerSelector ref="invite" value={invite_level} disabled={!can_change_levels || current_user_level < invite_level} onChange={this.onPowerLevelsChanged}/>
+                        <PowerSelector ref="invite" value={invite_level} controlled={false} disabled={!can_change_levels || current_user_level < invite_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
                         <span className="mx_RoomSettings_powerLevelKey">To configure the room, you must be a </span>
-                        <PowerSelector ref="state_default" value={state_level} disabled={!can_change_levels || current_user_level < state_level} onChange={this.onPowerLevelsChanged}/>
+                        <PowerSelector ref="state_default" value={state_level} controlled={false} disabled={!can_change_levels || current_user_level < state_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
                         <span className="mx_RoomSettings_powerLevelKey">To kick users, you must be a </span>
-                        <PowerSelector ref="kick" value={kick_level} disabled={!can_change_levels || current_user_level < kick_level} onChange={this.onPowerLevelsChanged}/>
+                        <PowerSelector ref="kick" value={kick_level} controlled={false} disabled={!can_change_levels || current_user_level < kick_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
                         <span className="mx_RoomSettings_powerLevelKey">To ban users, you must be a </span>
-                        <PowerSelector ref="ban" value={ban_level} disabled={!can_change_levels || current_user_level < ban_level} onChange={this.onPowerLevelsChanged}/>
+                        <PowerSelector ref="ban" value={ban_level} controlled={false} disabled={!can_change_levels || current_user_level < ban_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
                         <span className="mx_RoomSettings_powerLevelKey">To redact messages, you must be a </span>
-                        <PowerSelector ref="redact" value={redact_level} disabled={!can_change_levels || current_user_level < redact_level} onChange={this.onPowerLevelsChanged}/>
+                        <PowerSelector ref="redact" value={redact_level} controlled={false} disabled={!can_change_levels || current_user_level < redact_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
 
                     {Object.keys(events_levels).map(function(event_type, i) {
                         return (
                             <div className="mx_RoomSettings_powerLevel" key={event_type}>
                                 <span className="mx_RoomSettings_powerLevelKey">To send events of type <code>{ event_type }</code>, you must be a </span>
-                                <PowerSelector value={ events_levels[event_type] } disabled={true} onChange={self.onPowerLevelsChanged}/>
+                                <PowerSelector value={ events_levels[event_type] } controlled={false} disabled={true} onChange={self.onPowerLevelsChanged}/>
                             </div>
                         );
                     })}