Skip to content

Autofocus RTE when answer/hint editor opens #5921

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
akolson wants to merge 4 commits into
base: hotfixes
Choose a base branch
from
Open

Autofocus RTE when answer/hint editor opens #5921

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7c45abf
fix(exercises): autofocus RTE when answer/hint editor opens
akolson May 18, 2026
f8bc773
fix(rte): guard editor.value in nextTick with optional chaining
akolson May 18, 2026
f79c508
test(exercises): assert autofocus prop on open answer/hint editor
akolson May 18, 2026
ef24d28
refactor(tests): use component reference instead of name string in fi…
akolson May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion ...ation/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { shallowMount, mount } from '@vue/test-utils';
import { AssessmentItemToolbarActions } from '../../constants';
import AnswersEditor from './AnswersEditor';
import { AssessmentItemTypes } from 'shared/constants';
import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';

jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');

Expand Down Expand Up @@ -245,6 +246,31 @@ describe('AnswersEditor', () => {
});
});

describe('autofocus on the open answer editor', () => {
beforeEach(() => {
wrapper = mount(AnswersEditor, {
propsData: {
questionKind: AssessmentItemTypes.SINGLE_SELECTION,
answers: [
{ answer: 'Mayonnaise (I mean you can, but...)', correct: true, order: 1 },
{ answer: 'Peanut butter', correct: false, order: 2 },
],
openAnswerIdx: 1,
},
});
});

it('passes autofocus=true to the open answer editor', () => {
const editors = wrapper.findAllComponents(TipTapEditor);
Copy link
Copy Markdown
Contributor

@rtibblesbot rtibblesbot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: Switching from { name: 'RichTextEditor' } to the imported TipTapEditor reference is strictly better — name-based lookup silently returns zero results after a rename, while reference-based lookup fails loudly. Good improvement to existing test infrastructure.

expect(editors.at(1).props('autofocus')).toBe(true);
});

it('passes autofocus=false to closed answer editors', () => {
const editors = wrapper.findAllComponents(TipTapEditor);
expect(editors.at(0).props('autofocus')).toBe(false);
});
});

describe('on an answer click', () => {
beforeEach(async () => {
wrapper = mount(AnswersEditor, {
Expand Down Expand Up @@ -314,7 +340,7 @@ describe('AnswersEditor', () => {
},
});

const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
const editors = wrapper.findAllComponents(TipTapEditor);
editors.at(1).vm.$emit('update', 'European butter');

await wrapper.vm.$nextTick();
Expand Down
2 changes: 2 additions & 0 deletions ...tcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
v-model="answer.answer"
class="editor"
:mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
:autofocus="isAnswerOpen(answerIdx)"
:imageProcessor="EditorImageProcessor"
@update="updateAnswerText($event, answerIdx)"
@minimize="emitClose"
Expand Down Expand Up @@ -164,6 +165,7 @@
v-model="answer.answer"
class="editor"
:mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
:autofocus="isAnswerOpen(answerIdx)"
:imageProcessor="EditorImageProcessor"
@update="updateAnswerText($event, answerIdx)"
@minimize="emitClose"
Expand Down
29 changes: 27 additions & 2 deletions ...tcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { shallowMount, mount } from '@vue/test-utils';
import { AssessmentItemToolbarActions } from '../../constants';

import HintsEditor from './HintsEditor';
import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';

jest.mock('shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue');

Expand Down Expand Up @@ -65,7 +66,7 @@ describe('HintsEditor', () => {
});

// Find all instances of your new RichTextEditor component
const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
const editors = wrapper.findAllComponents(TipTapEditor);
expect(editors.length).toBe(2);

// Instead of checking the raw HTML, we check the `value` prop passed to each editor.
Expand All @@ -85,7 +86,7 @@ describe('HintsEditor', () => {
},
});

const editors = wrapper.findAllComponents({ name: 'RichTextEditor' });
const editors = wrapper.findAllComponents(TipTapEditor);
editors.at(1).vm.$emit('update', 'Updated hint');
});

Expand Down Expand Up @@ -131,6 +132,30 @@ describe('HintsEditor', () => {
});
});

describe('autofocus on the open hint editor', () => {
beforeEach(() => {
wrapper = mount(HintsEditor, {
propsData: {
hints: [
{ hint: 'First hint', order: 1 },
{ hint: 'Second hint', order: 2 },
],
openHintIdx: 0,
},
});
});

it('passes autofocus=true to the open hint editor', () => {
const editors = wrapper.findAllComponents(TipTapEditor);
expect(editors.at(0).props('autofocus')).toBe(true);
});

it('passes autofocus=false to closed hint editors', () => {
const editors = wrapper.findAllComponents(TipTapEditor);
expect(editors.at(1).props('autofocus')).toBe(false);
});
});

describe('on hint click', () => {
beforeEach(async () => {
wrapper = mount(HintsEditor, {
Expand Down
4 changes: 3 additions & 1 deletion contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
<TipTapEditor
v-model="hint.hint"
:mode="isHintOpen(hintIdx) ? 'edit' : 'view'"
:autofocus="isHintOpen(hintIdx)"
:image-processor="EditorImageProcessor"
@update="updateHintText($event, hintIdx)"
@minimize="emitClose"
Expand Down Expand Up @@ -79,10 +80,11 @@
<TipTapEditor
v-model="hint.hint"
:mode="isHintOpen(hintIdx) ? 'edit' : 'view'"
:autofocus="isHintOpen(hintIdx)"
:image-processor="EditorImageProcessor"
@update="updateHintText($event, hintIdx)"
@minimize="emitClose"
@open-editor="emitOpen(answerIdx)"
@open-editor="emitOpen(hintIdx)"
Copy link
Copy Markdown
Contributor

@rtibblesbot rtibblesbot May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: Good catch on the pre-existing answerIdx → hintIdx rename. answerIdx was never in scope here, so emitOpen was silently receiving undefined and the keyboard open-editor path was broken for hints on desktop. Including it in this PR rather than leaving it as a separate issue was the right call.

/>
</keep-alive>
</transition>
Expand Down
5 changes: 5 additions & 0 deletions ...curation/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,11 @@
if (editor.value && editor.value.isEditable !== (newMode === 'edit')) {
editor.value.setEditable(newMode === 'edit');
}
if (newMode === 'edit' && editor.value && props.autofocus) {
nextTick(() => {
editor.value?.commands.focus('end');
});
}
},
);

Expand Down
Loading