Treat defaultValue from Blockly prompts properly

That is, as the default value for the input, not the placeholder.
scratchfoundation · Dec 7, 2018 · 236948a · 236948a
1 parent adf7270
commit 236948a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/components/prompt/prompt.jsx b/src/components/prompt/prompt.jsx
@@ -48,9 +48,10 @@ const PromptComponent = props => (
                 <input
                     autoFocus
                     className={styles.variableNameTextInput}
+                    defaultValue={props.defaultValue}
                     name={props.label}
-                    placeholder={props.placeholder}
                     onChange={props.onChange}
+                    onFocus={props.onFocus}
                     onKeyPress={props.onKeyPress}
                 />
             </Box>
@@ -133,14 +134,15 @@ const PromptComponent = props => (
 );
 
 PromptComponent.propTypes = {
+    defaultValue: PropTypes.string,
     isStage: PropTypes.bool.isRequired,
     label: PropTypes.string.isRequired,
     onCancel: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
+    onFocus: PropTypes.func.isRequired,
     onKeyPress: PropTypes.func.isRequired,
     onOk: PropTypes.func.isRequired,
     onOptionSelection: PropTypes.func.isRequired,
-    placeholder: PropTypes.string,
     showMoreOptions: PropTypes.bool.isRequired,
     title: PropTypes.string.isRequired
 };

diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
@@ -450,9 +450,9 @@ class Blocks extends React.Component {
                 />
                 {this.state.prompt ? (
                     <Prompt
+                        defaultValue={this.state.prompt.defaultValue}
                         isStage={vm.runtime.getEditingTarget().isStage}
                         label={this.state.prompt.message}
-                        placeholder={this.state.prompt.defaultValue}
                         showMoreOptions={this.state.prompt.showMoreOptions}
                         title={this.state.prompt.title}
                         onCancel={this.handlePromptClose}

diff --git a/src/containers/prompt.jsx b/src/containers/prompt.jsx
@@ -21,6 +21,9 @@ class Prompt extends React.Component {
     handleKeyPress (event) {
         if (event.key === 'Enter') this.handleOk();
     }
+    handleFocus (event) {
+        event.target.select();
+    }
     handleOk () {
         this.props.onOk(this.state.inputValue, this.state.optionSelection);
     }
@@ -36,13 +39,14 @@ class Prompt extends React.Component {
     render () {
         return (
             <PromptComponent
+                defaultValue={this.props.defaultValue}
                 isStage={this.props.isStage}
                 label={this.props.label}
-                placeholder={this.props.placeholder}
                 showMoreOptions={this.props.showMoreOptions}
                 title={this.props.title}
                 onCancel={this.handleCancel}
                 onChange={this.handleChange}
+                onFocus={this.handleFocus}
                 onKeyPress={this.handleKeyPress}
                 onOk={this.handleOk}
                 onOptionSelection={this.handleOptionSelection}
@@ -52,11 +56,11 @@ class Prompt extends React.Component {
 }
 
 Prompt.propTypes = {
+    defaultValue: PropTypes.string,
     isStage: PropTypes.bool.isRequired,
     label: PropTypes.string.isRequired,
     onCancel: PropTypes.func.isRequired,
     onOk: PropTypes.func.isRequired,
-    placeholder: PropTypes.string,
     showMoreOptions: PropTypes.bool.isRequired,
     title: PropTypes.string.isRequired
 };