From ab673fe771cc688f985cf56e62ad58e847c1a9a4 Mon Sep 17 00:00:00 2001 From: nik72619c Date: Fri, 28 Feb 2020 01:57:28 +0530 Subject: [PATCH 1/3] Fix focus not coming on clicking on the rename option for a sketch, inside the Sketch Modal --- client/modules/IDE/components/SketchList.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 89d5cb10..5670c2d6 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -29,6 +29,7 @@ class SketchListRowBase extends React.Component { renameValue: props.sketch.name, isFocused: false }; + this.renameInput = React.createRef(); } onFocusComponent = () => { this.setState({ isFocused: true }); @@ -66,7 +67,7 @@ class SketchListRowBase extends React.Component { openRename = () => { this.setState({ renameOpen: true - }); + }, () => this.renameInput.current.focus()); } closeRename = () => { @@ -158,6 +159,7 @@ class SketchListRowBase extends React.Component { onKeyUp={this.handleRenameEnter} onBlur={this.resetSketchName} onClick={e => e.stopPropagation()} + ref={this.renameInput} /> } From 47458ae6010314bfe45780c03d89f08a5131e8a6 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 2 Apr 2020 17:27:58 -0400 Subject: [PATCH 2/3] Re-add ref in jsx removed in merge conflict --- client/modules/IDE/components/SketchList.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 8cfc0af1..7f2c6082 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -258,6 +258,7 @@ class SketchListRowBase extends React.Component { onKeyUp={this.handleRenameEnter} onBlur={this.resetSketchName} onClick={e => e.stopPropagation()} + ref={this.renameInput} /> } From d348f79d2a0aafe15c2d5bc09641e42b9ac5fcf5 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Thu, 2 Apr 2020 17:52:04 -0400 Subject: [PATCH 3/3] Add ref to focus in Collection List, handle whitespace errors in renaming sketch and collection --- .../CollectionList/CollectionListRow.jsx | 30 ++++++++++--------- client/modules/IDE/components/SketchList.jsx | 23 ++++++++++---- 2 files changed, 34 insertions(+), 19 deletions(-) diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx index 93513511..0f7f9a53 100644 --- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx +++ b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx @@ -25,6 +25,7 @@ class CollectionListRowBase extends React.Component { renameOpen: false, renameValue: '', }; + this.renameInput = React.createRef(); } onFocusComponent = () => { @@ -89,7 +90,7 @@ class CollectionListRowBase extends React.Component { this.setState({ renameOpen: true, renameValue: this.props.collection.name, - }); + }, () => this.renameInput.current.focus()); } handleRenameChange = (e) => { @@ -99,23 +100,23 @@ class CollectionListRowBase extends React.Component { } handleRenameEnter = (e) => { - const isValid = this.state.renameValue !== ''; - if (e.key === 'Enter') { - if (isValid) { - this.props.editCollection(this.props.collection.id, { name: this.state.renameValue }); - } - - // this.resetName(); + this.updateName(); this.closeAll(); } } - // resetName = () => { - // this.setState({ - // renameValue: this.props.collection.name - // }); - // } + handleRenameBlur = () => { + this.updateName(); + this.closeAll(); + } + + updateName = () => { + const isValid = this.state.renameValue.trim().length !== 0; + if (isValid) { + this.props.editCollection(this.props.collection.id, { name: this.state.renameValue.trim() }); + } + } renderActions = () => { const { optionsOpen } = this.state; @@ -188,8 +189,9 @@ class CollectionListRowBase extends React.Component { value={renameValue} onChange={this.handleRenameChange} onKeyUp={this.handleRenameEnter} - // onBlur={this.resetName} + onBlur={this.handleRenameBlur} onClick={e => e.stopPropagation()} + ref={this.renameInput} /> } diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 7f2c6082..83b90c2e 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -70,7 +70,8 @@ class SketchListRowBase extends React.Component { openRename = () => { this.setState({ - renameOpen: true + renameOpen: true, + renameValue: this.props.sketch.name }, () => this.renameInput.current.focus()); } @@ -95,15 +96,27 @@ class SketchListRowBase extends React.Component { handleRenameEnter = (e) => { if (e.key === 'Enter') { - // TODO pass this func - this.props.changeProjectName(this.props.sketch.id, this.state.renameValue); + this.updateName(); this.closeAll(); } } + handleRenameBlur = () => { + this.updateName(); + this.closeAll(); + } + + updateName = () => { + const isValid = this.state.renameValue.trim().length !== 0; + if (isValid) { + this.props.changeProjectName(this.props.sketch.id, this.state.renameValue.trim()); + } + } + resetSketchName = () => { this.setState({ - renameValue: this.props.sketch.name + renameValue: this.props.sketch.name, + renameOpen: false }); } @@ -256,7 +269,7 @@ class SketchListRowBase extends React.Component { value={renameValue} onChange={this.handleRenameChange} onKeyUp={this.handleRenameEnter} - onBlur={this.resetSketchName} + onBlur={this.handleRenameBlur} onClick={e => e.stopPropagation()} ref={this.renameInput} />