r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Merge pull request #1299 from nik72619c/rename-input-not-changing-focus

Browse source 
Fix focus not coming on clicking on the rename option
This commit is contained in:
Cassie Tarakajian 2020-04-02 17:53:14 -04:00 committed by GitHub
commit c19ae217ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
client/modules/IDE/components/CollectionList/CollectionListRow.jsx
View file

@ -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}
/>
}
</React.Fragment>

27
client/modules/IDE/components/SketchList.jsx
View file

@ -32,6 +32,7 @@ class SketchListRowBase extends React.Component {
renameValue: props.sketch.name,
isFocused: false,
};
this.renameInput = React.createRef();
}
onFocusComponent = () => {
@ -69,8 +70,9 @@ class SketchListRowBase extends React.Component {
openRename = () => {
this.setState({
renameOpen: true
});
renameOpen: true,
renameValue: this.props.sketch.name
}, () => this.renameInput.current.focus());
}
closeRename = () => {
@ -94,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
});
}
@ -255,8 +269,9 @@ 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}
/>
}
</React.Fragment>