Add SemiControlledTextField to be able to type freely in PropertiesEditor

newIDE/app/src/PropertiesEditor/SemiControlledTextField.js

@@ -0,0 +1,52 @@
+// @flow
+import * as React from 'react';
+import TextField from 'material-ui/TextField';
+
+type State = {
+  focused: boolean,
+  text: ?string,
+};
+
+/**
+ * This component works like a material-ui TextField, except that
+ * the value passed as props is not forced into the text field when the user
+ * is typing. This is useful if the parent component can do modifications on the value:
+ * the user won't be interrupted or have the value changed until he blurs the field.
+ */
+export default class SemiControlledTextField extends React.Component<*, State> {
+  state = {
+    focused: false,
+    text: null,
+  };
+
+  render() {
+    const { value, onChange, ...otherProps } = this.props;
+
+    return (
+      <TextField
+        {...otherProps}
+        value={this.state.focused ? this.state.text : value}
+        onFocus={() => {
+          this.setState({
+            focused: true,
+            text: this.props.value,
+          });
+        }}
+        onChange={(event, newValue) => {
+          this.setState({
+            text: newValue,
+          });
+
+          onChange(newValue);
+        }}
+        onBlur={event => {
+          onChange(event.target.value);
+          this.setState({
+            focused: false,
+            text: null,
+          });
+        }}
+      />
+    );
+  }
+}

newIDE/app/src/PropertiesEditor/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import TextField from 'material-ui/TextField';
+import SemiControlledTextField from './SemiControlledTextField';
 import Checkbox from 'material-ui/Checkbox';
 import Subheader from 'material-ui/Subheader';
 import FlatButton from 'material-ui/FlatButton';
@@ -53,13 +53,13 @@ export default class PropertiesEditor extends Component {
       );
     } else if (field.valueType === 'number') {
       return (
-        <TextField
+        <SemiControlledTextField
           value={this._getFieldValue(this.props.instances, field)}
           key={field.name}
           id={field.name}
           floatingLabelText={field.name}
-          floatingLabelFixed={true}
-          onChange={(event, newValue) => {
+          floatingLabelFixed
+          onChange={newValue => {
             this.props.instances.forEach(i =>
               field.setValue(i, parseFloat(newValue) || 0)
             );
@@ -72,16 +72,17 @@ export default class PropertiesEditor extends Component {
       );
     } else {
       return (
-        <TextField
+        <SemiControlledTextField
           value={this._getFieldValue(
             this.props.instances,
             field,
             '(Multiple values)'
           )}
           key={field.name}
+          id={field.name}
           floatingLabelText={field.name}
-          floatingLabelFixed={true}
-          onChange={(event, newValue) => {
+          floatingLabelFixed
+          onChange={newValue => {
             this.props.instances.forEach(i =>
               field.setValue(i, newValue || '')
             );
@@ -107,7 +108,7 @@ export default class PropertiesEditor extends Component {
           value={this._getFieldValue(this.props.instances, field)}
           key={field.name}
           floatingLabelText={field.name}
-          floatingLabelFixed={true}
+          floatingLabelFixed
           onChange={(event, index, newValue) => {
             this.props.instances.forEach(i =>
               field.setValue(i, parseFloat(newValue) || 0)
@@ -130,7 +131,7 @@ export default class PropertiesEditor extends Component {
           )}
           key={field.name}
           floatingLabelText={field.name}
-          floatingLabelFixed={true}
+          floatingLabelFixed
           onChange={(event, index, newValue) => {
             this.props.instances.forEach(i =>
               field.setValue(i, newValue || '')

newIDE/app/src/SceneEditor/InstancesFullEditor/ScenePropertiesDialog.js

@@ -59,6 +59,7 @@ export default class ScenePropertiesDialog extends Component {
       // />,
       <FlatButton
         label="Ok"
+        key="ok"
         primary={true}
         keyboardFocused={true}
         onClick={this._onApply}