diff --git a/frontend/apps/remark42/app/components/comment-form/comment-form.spec.tsx b/frontend/apps/remark42/app/components/comment-form/comment-form.spec.tsx index 1214025a..5ff7c37d 100644 --- a/frontend/apps/remark42/app/components/comment-form/comment-form.spec.tsx +++ b/frontend/apps/remark42/app/components/comment-form/comment-form.spec.tsx @@ -40,7 +40,7 @@ function setup(overrideProps: Partial = {}, overrideConfig: Partial', () => { afterEach(() => { // reset textarea id in order to have `textarea_1` for every test - CommentForm.textareaId = 0; + CommentForm.textareaCounter = 0; localStorage.clear(); }); diff --git a/frontend/apps/remark42/app/components/comment-form/comment-form.tsx b/frontend/apps/remark42/app/components/comment-form/comment-form.tsx index 494e0ebc..5e774032 100644 --- a/frontend/apps/remark42/app/components/comment-form/comment-form.tsx +++ b/frontend/apps/remark42/app/components/comment-form/comment-form.tsx @@ -58,7 +58,10 @@ const ImageMimeRegex = /image\//i; export class CommentForm extends Component { /** reference to textarea element */ textareaRef = createRef(); - static textareaId = 0; + /** global counter for generating unique textarea IDs across all instances */ + static textareaCounter = 0; + /** unique textarea ID for this instance */ + readonly textareaId: string; state = { preview: null, @@ -75,7 +78,8 @@ export class CommentForm extends Component { const savedComment = getPersistedComment(props.id); this.state.text = props.value ?? savedComment ?? ''; - CommentForm.textareaId += 1; + CommentForm.textareaCounter += 1; + this.textareaId = `textarea_${CommentForm.textareaCounter}`; } componentWillReceiveProps(nextProps: Props) { @@ -416,7 +420,6 @@ export class CommentForm extends Component { edit: , reply: , }; - const textareaId = `textarea_${CommentForm.textareaId}`; const label = buttonText || Labels[mode || 'main']; const placeholderMessage = intl.formatMessage(messages.placeholder); const isSimpleView = StaticStore.config.simple_view; @@ -443,14 +446,14 @@ export class CommentForm extends Component { intl={intl} allowUpload={Boolean(uploadImage)} uploadImages={this.uploadImages} - textareaId={textareaId} + textareaId={this.textareaId} /> )}