Skip to content
代码片段 群组 项目
提交 7299a68e 编辑于 作者: Anna Vovchenko's avatar Anna Vovchenko
浏览文件

Merge branch '417599-autofocus-on-switch' into 'master'

Return the focus back to the editors when switching between them

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/126974



Merged-by: default avatarAnna Vovchenko <avovchenko@gitlab.com>
Approved-by: default avatarDésirée Chevalier <dchevalier@gitlab.com>
Approved-by: default avatarRudy Crespo <rcrespo@gitlab.com>
Approved-by: default avatarAnna Vovchenko <avovchenko@gitlab.com>
Reviewed-by: default avatarAnna Vovchenko <avovchenko@gitlab.com>
Reviewed-by: default avatarRudy Crespo <rcrespo@gitlab.com>
Co-authored-by: default avatarHimanshu Kapoor <hkapoor@gitlab.com>
No related branches found
No related tags found
无相关合并请求
......@@ -193,9 +193,12 @@ export default {
}
},
focus() {
this.contentEditor.tiptapEditor.commands.focus();
},
onFocus() {
this.focused = true;
},
blur() {
onBlur() {
this.focused = false;
},
notifyLoading() {
......@@ -230,8 +233,8 @@ export default {
<div class="md-area gl-overflow-hidden">
<editor-state-observer
@docUpdate="notifyChange"
@focus="focus"
@blur="blur"
@focus="onFocus"
@blur="onBlur"
@keydown="$emit('keydown', $event)"
/>
<content-editor-alert />
......
......@@ -13,6 +13,22 @@ import {
import MarkdownField from './field.vue';
import eventHub from './eventhub';
async function sleep(t = 10) {
return new Promise((resolve) => {
setTimeout(resolve, t);
});
}
async function waitFor(getEl, interval = 10, timeout = 2000) {
if (timeout <= 0) return null;
const el = getEl();
if (el) return el;
await sleep(interval);
return waitFor(getEl, timeout - interval);
}
export default {
components: {
LocalStorageSync,
......@@ -190,8 +206,15 @@ export default {
this.$emit(editingMode);
this.notifyEditingModeChange(editingMode);
},
notifyEditingModeChange(editingMode) {
async notifyEditingModeChange(editingMode) {
this.$emit(editingMode);
const componentToFocus =
editingMode === EDITING_MODE_CONTENT_EDITOR
? () => this.$refs.contentEditor
: () => this.$refs.textarea;
(await waitFor(componentToFocus)).focus();
},
autofocusTextarea() {
if (this.autofocus && this.editingMode === EDITING_MODE_MARKDOWN_FIELD) {
......
......@@ -130,7 +130,7 @@ def click_edit_issue_description
click_button("Switch to rich text editing")
end
expect(issuable_form).not_to have_selector(content_editor_focused_selector)
expect(issuable_form).to have_selector(content_editor_focused_selector)
refresh
......@@ -142,7 +142,7 @@ def click_edit_issue_description
click_button("Switch to plain text editing")
end
expect(issuable_form).not_to have_selector(markdown_field_focused_selector)
expect(issuable_form).to have_selector(markdown_field_focused_selector)
end
end
......
......@@ -9,6 +9,10 @@ def close_rich_text_promo_popover_if_present
end
end
def switch_to_markdown_editor
click_button("Switch to plain text editing")
end
def switch_to_content_editor
click_button("Switch to rich text editing")
end
......
......@@ -27,6 +27,19 @@
expect(page).to have_text('Typing text in the content editor')
end
it 'autofocuses the rich text editor when switching to rich text' do
switch_to_content_editor
expect(page).to have_css("#{content_editor_testid}:focus")
end
it 'autofocuses the plain text editor when switching back to markdown' do
switch_to_content_editor
switch_to_markdown_editor
expect(page).to have_css("textarea:focus")
end
describe 'creating and editing links' do
before do
switch_to_content_editor
......
0% 加载中 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册