- {widgets.map(widget =>
+ {widgets.map((widget, idx) =>
React.cloneElement(widget, {
+ focus: idx === 0,
annotation : currentAnnotation,
readOnly : props.readOnly,
env: props.env,
diff --git a/src/editor/widgets/Autocomplete.jsx b/src/editor/widgets/Autocomplete.jsx
index e97b113..08a9839 100644
--- a/src/editor/widgets/Autocomplete.jsx
+++ b/src/editor/widgets/Autocomplete.jsx
@@ -14,8 +14,13 @@ export default class Autocomplete extends Component {
}
componentDidMount() {
- if (this.props.initialValue && this.element.current)
- this.element.current.querySelector('input').value = this.props.initialValue;
+ if (this.element.current) {
+ if (this.props.initialValue)
+ this.element.current.querySelector('input').value = this.props.initialValue;
+
+ if (this.props.focus)
+ this.element.current.querySelector('input').focus();
+ }
}
onInputValueChange = ({ inputValue }) => {
diff --git a/src/editor/widgets/comment/CommentWidget.jsx b/src/editor/widgets/comment/CommentWidget.jsx
index 5254bd0..ec3fb8a 100644
--- a/src/editor/widgets/comment/CommentWidget.jsx
+++ b/src/editor/widgets/comment/CommentWidget.jsx
@@ -60,6 +60,7 @@ const getDraftReply = (existingDraft, isReply) => {
* Renders a list of comment bodies, followed by a 'reply' field.
*/
const CommentWidget = props => {
+
// All comments
const all = props.annotation ?
props.annotation.bodies.filter(body => isComment(body, props.purposeSelector)) : [];
@@ -103,6 +104,7 @@ const CommentWidget = props => {
{ !props.readOnly && props.annotation &&
0 ? i18n.t('Add a reply...') : i18n.t('Add a comment...')}
diff --git a/src/editor/widgets/comment/TextEntryField.jsx b/src/editor/widgets/comment/TextEntryField.jsx
index cbd5e46..444970d 100644
--- a/src/editor/widgets/comment/TextEntryField.jsx
+++ b/src/editor/widgets/comment/TextEntryField.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
import TextareaAutosize from 'react-autosize-textarea';
import i18n from '../../../i18n';
@@ -7,21 +7,27 @@ import i18n from '../../../i18n';
*/
export default class TextEntryField extends Component {
+ constructor(props) {
+ super(props);
+
+ this.element = createRef();
+ }
+
// CTRL+Enter functions as Ok
onKeyDown = evt => {
if (evt.which === 13 && evt.ctrlKey)
this.props.onSaveAndClose();
}
- // Focus on render
- onRender = ref => {
- // Note: we could use this to set automatic focus (but leave this out for now)
+ componentDidMount() {
+ if (this.props.focus && this.element.current)
+ this.element.current.focus();
}
render() {
return (
{
{!props.readOnly &&