diff --git a/frontend/src/components/dialog/edit-filetag-dialog.js b/frontend/src/components/dialog/edit-filetag-dialog.js
index d26542db93..6dc5709c42 100644
--- a/frontend/src/components/dialog/edit-filetag-dialog.js
+++ b/frontend/src/components/dialog/edit-filetag-dialog.js
@@ -211,7 +211,7 @@ class EditFileTagDialog extends React.Component {
render() {
return (
-
+
{this.state.isListRepoTagShow &&
{
diff --git a/frontend/src/components/dialog/new-wiki-dialog.js b/frontend/src/components/dialog/new-wiki-dialog.js
index 573054ec54..e093413bed 100644
--- a/frontend/src/components/dialog/new-wiki-dialog.js
+++ b/frontend/src/components/dialog/new-wiki-dialog.js
@@ -18,12 +18,6 @@ class NewWikiDialog extends React.Component {
repoID: '',
isSubmitBtnActive: false,
};
- this.newName = React.createRef();
- }
-
- componentDidMount() {
- this.newName.focus();
- this.newName.setSelectionRange(0, -1);
}
inputNewName = (e) => {
@@ -56,11 +50,11 @@ class NewWikiDialog extends React.Component {
render() {
return (
-
+
{gettext('New Wiki')}
- {this.newName = input;}} value={this.state.name} onChange={this.inputNewName}/>
+
diff --git a/frontend/src/components/dialog/org-add-department-dialog.js b/frontend/src/components/dialog/org-add-department-dialog.js
index 29849b2513..4afbcdf36f 100644
--- a/frontend/src/components/dialog/org-add-department-dialog.js
+++ b/frontend/src/components/dialog/org-add-department-dialog.js
@@ -19,12 +19,6 @@ class AddDepartDialog extends React.Component {
departName: '',
errMessage: '',
};
- this.newInput = React.createRef();
- }
-
- componentDidMount() {
- this.newInput.focus();
- this.newInput.setSelectionRange(0, 0);
}
handleSubmit = () => {
@@ -71,7 +65,7 @@ class AddDepartDialog extends React.Component {
render() {
let header = this.props.parentGroupID ? gettext('New Sub-department') : gettext('New Department');
return (
-
+
{header}
diff --git a/frontend/src/components/dialog/org-add-repo-dialog.js b/frontend/src/components/dialog/org-add-repo-dialog.js
index 38ed1b03ac..ae522077e2 100644
--- a/frontend/src/components/dialog/org-add-repo-dialog.js
+++ b/frontend/src/components/dialog/org-add-repo-dialog.js
@@ -19,12 +19,6 @@ class AddRepoDialog extends React.Component {
repoName: '',
errMessage: '',
};
- this.newInput = React.createRef();
- }
-
- componentDidMount() {
- this.newInput.focus();
- this.newInput.setSelectionRange(0, 0);
}
handleSubmit = () => {
@@ -66,7 +60,7 @@ class AddRepoDialog extends React.Component {
render() {
return (
-
+
{gettext('New Library')}
diff --git a/frontend/src/components/dialog/org-import-users-dialog.js b/frontend/src/components/dialog/org-import-users-dialog.js
index acadd65037..4dfaefc0e8 100644
--- a/frontend/src/components/dialog/org-import-users-dialog.js
+++ b/frontend/src/components/dialog/org-import-users-dialog.js
@@ -11,10 +11,10 @@ const propTypes = {
class ImportOrgUsersDialog extends React.Component {
constructor(props) {
super(props);
- this.fileInputRef = React.createRef();
this.state = {
errorMsg: ''
};
+ this.fileInputRef = React.createRef();
}
toggle = () => {
diff --git a/frontend/src/components/dialog/org-rename-department-dialog.js b/frontend/src/components/dialog/org-rename-department-dialog.js
index 8aa03773d7..5d2cdad3f4 100644
--- a/frontend/src/components/dialog/org-rename-department-dialog.js
+++ b/frontend/src/components/dialog/org-rename-department-dialog.js
@@ -31,11 +31,6 @@ class RenameDepartmentDialog extends React.Component {
this.newInput = React.createRef();
}
- componentDidMount() {
- this.newInput.select();
- this.newInput.focus();
- }
-
handleSubmit = () => {
let isValid = this.validateName();
const { orgID, groupID } = this.props;
@@ -75,10 +70,16 @@ class RenameDepartmentDialog extends React.Component {
}
}
+ onAfterModelOpened = () => {
+ if (!this.newInput.current) return;
+ this.newInput.current.focus();
+ this.newInput.current.select();
+ }
+
render() {
let header = gettext('Rename Department');
return (
-
+
{header}
diff --git a/frontend/src/components/dialog/org-set-group-quota-dialog.js b/frontend/src/components/dialog/org-set-group-quota-dialog.js
index 6732a22e63..4404c98db5 100644
--- a/frontend/src/components/dialog/org-set-group-quota-dialog.js
+++ b/frontend/src/components/dialog/org-set-group-quota-dialog.js
@@ -20,12 +20,6 @@ class SetGroupQuotaDialog extends React.Component {
quota: '',
errMessage: '',
};
- this.newInput = React.createRef();
- }
-
- componentDidMount() {
- this.newInput.focus();
- this.newInput.setSelectionRange(0, 0);
}
setGroupQuota = () => {
@@ -61,7 +55,7 @@ class SetGroupQuotaDialog extends React.Component {
render() {
return (
-
+
{gettext('Set Quota')}
@@ -69,7 +63,7 @@ class SetGroupQuotaDialog extends React.Component {
onKeyPress={this.handleKeyPress}
value={this.state.quota}
onChange={this.handleChange}
- innerRef={input => {this.newInput = input;}}
+ autoFocus={true}
/>
{'MB'}
diff --git a/frontend/src/components/dialog/rename-dialog.js b/frontend/src/components/dialog/rename-dialog.js
index e1679f6cfc..57a7fc24dd 100644
--- a/frontend/src/components/dialog/rename-dialog.js
+++ b/frontend/src/components/dialog/rename-dialog.js
@@ -12,6 +12,7 @@ const propTypes = {
};
class Rename extends React.Component {
+
constructor(props) {
super(props);
this.state = {
@@ -27,16 +28,8 @@ class Rename extends React.Component {
}
componentDidMount() {
- let currentNode = this.props.currentNode;
+ const { currentNode } = this.props;
this.changeState(currentNode);
- this.newInput.focus();
- let type = currentNode.object.type;
- if (type === 'file') {
- var endIndex = currentNode.object.name.lastIndexOf('.md');
- this.newInput.setSelectionRange(0, endIndex, 'forward');
- } else {
- this.newInput.setSelectionRange(0, -1);
- }
}
componentWillReceiveProps(nextProps) {
@@ -108,14 +101,27 @@ class Rename extends React.Component {
return isDuplicated;
}
+ onAfterModelOpened = () => {
+ if (!this.newInput.current) return;
+ const { currentNode } = this.props;
+ let type = currentNode.object.type;
+ this.newInput.current.focus();
+ if (type === 'file') {
+ var endIndex = currentNode.object.name.lastIndexOf('.md');
+ this.newInput.current.setSelectionRange(0, endIndex, 'forward');
+ } else {
+ this.newInput.current.setSelectionRange(0, -1);
+ }
+ }
+
render() {
let type = this.props.currentNode.object.type;
return (
-
+
{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }
{type === 'file' ? gettext('New file name'): gettext('New folder name')}
- {this.newInput = input;}} placeholder="newName" value={this.state.newName} onChange={this.handleChange} />
+
{this.state.errMessage && {this.state.errMessage}}
diff --git a/frontend/src/components/dialog/rename-dirent.js b/frontend/src/components/dialog/rename-dirent.js
index 8e773fc803..ec0b86d8e8 100644
--- a/frontend/src/components/dialog/rename-dirent.js
+++ b/frontend/src/components/dialog/rename-dirent.js
@@ -28,16 +28,8 @@ class Rename extends React.Component {
}
componentDidMount() {
- let {dirent} = this.props;
+ let { dirent } = this.props;
this.changeState(dirent);
- this.newInput.focus();
- let type = dirent.type;
- if (type === 'file') {
- var endIndex = dirent.name.lastIndexOf('.md');
- this.newInput.setSelectionRange(0, endIndex, 'forward');
- } else {
- this.newInput.setSelectionRange(0, -1);
- }
}
componentWillReceiveProps(nextProps) {
@@ -110,14 +102,28 @@ class Rename extends React.Component {
return isDuplicated;
}
+ onAfterModelOpened = () => {
+ if (!this.newInput.current) return;
+ this.newInput.current.focus();
+
+ let { dirent } = this.props;
+ let type = dirent.type;
+ if (type === 'file') {
+ var endIndex = dirent.name.lastIndexOf('.md');
+ this.newInput.current.setSelectionRange(0, endIndex, 'forward');
+ } else {
+ this.newInput.current.setSelectionRange(0, -1);
+ }
+ }
+
render() {
let type = this.props.dirent.type;
return (
-
+
{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }
{type === 'file' ? gettext('New file name'): gettext('New folder name')}
- {this.newInput = input;}} value={this.state.newName} onChange={this.handleChange} />
+
{this.state.errMessage && {this.state.errMessage}}
diff --git a/frontend/src/components/dialog/search-file-dialog.js b/frontend/src/components/dialog/search-file-dialog.js
index 1e19f25cd3..1abe8ca2f7 100644
--- a/frontend/src/components/dialog/search-file-dialog.js
+++ b/frontend/src/components/dialog/search-file-dialog.js
@@ -23,11 +23,6 @@ class SearchFileDialog extends React.Component {
errMessage: '',
fileList: null
};
- this.inputRef = React.createRef();
- }
-
- componentDidMount() {
- this.inputRef.current.focus();
}
searchFile = () => {
@@ -78,11 +73,11 @@ class SearchFileDialog extends React.Component {
render() {
const { q, errMessage, fileList, isSubmitDisabled, isSubmitting } = this.state;
return (
-
+
{gettext('Search')}
-
+
{errMessage && {errMessage}}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js
index 1983fea425..503116291b 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-department-dialog.js
@@ -19,12 +19,6 @@ class AddDepartDialog extends React.Component {
departName: '',
errMessage: '',
};
- this.newInput = React.createRef();
- }
-
- componentDidMount() {
- this.newInput.focus();
- this.newInput.setSelectionRange(0, 0);
}
handleSubmit = () => {
@@ -71,7 +65,7 @@ class AddDepartDialog extends React.Component {
render() {
let header = this.props.parentGroupID ? gettext('New Sub-department') : gettext('New Department');
return (
-
+
{header}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js
index e7cfb80692..f0db249d35 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-add-repo-dialog.js
@@ -19,12 +19,6 @@ class AddRepoDialog extends React.Component {
repoName: '',
errMessage: '',
};
- this.newInput = React.createRef();
- }
-
- componentDidMount() {
- this.newInput.focus();
- this.newInput.setSelectionRange(0, 0);
}
handleSubmit = () => {
@@ -66,7 +60,7 @@ class AddRepoDialog extends React.Component {
render() {
return (
-
+
{gettext('New Library')}
diff --git a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
index 48165334e5..8d382b6949 100644
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-create-group-dialog.js
@@ -20,7 +20,6 @@ class SysAdminCreateGroupDialog extends React.Component {
errMessage: '',
isSubmitBtnActive: false
};
- this.newInput = React.createRef();
}
handleRepoNameChange = (e) => {
@@ -56,13 +55,9 @@ class SysAdminCreateGroupDialog extends React.Component {
this.props.toggleDialog();
}
- componentDidMount() {
- this.newInput.focus();
- }
-
render() {
return (
-
+
{gettext('New Group')}