Commit 247ae131 authored by Fatih Acet's avatar Fatih Acet

Merge branch 'issue-description-scroll-fix' into 'master'

Trigger autosize update after template selection

## What does this MR do?

Triggers an autosize update after selecting an issue template.

The autosize plugin doesn't react to value changes and therefore doesn't automatically update when the user selects the template. This merge request adds it so that it detects if the editor the template selector is a jQuery object (not Ace editor) & then triggers the autosize event to allow the user to scroll the textarea.

## Screenshots (if relevant)

![resize](/uploads/1ab04b4202309b13f1178e04c0953112/resize.gif)

## What are the relevant issue numbers?

Closes #21982

See merge request !6282
parents 4b6fd0df 287663b2
...@@ -37,6 +37,7 @@ v 8.12.0 (unreleased) ...@@ -37,6 +37,7 @@ v 8.12.0 (unreleased)
- Request only the LDAP attributes we need !6187 - Request only the LDAP attributes we need !6187
- Center build stage columns in pipeline overview (ClemMakesApps) - Center build stage columns in pipeline overview (ClemMakesApps)
- Rename behaviour to behavior in bug issue template for consistency (ClemMakesApps) - Rename behaviour to behavior in bug issue template for consistency (ClemMakesApps)
- Fix bug stopping issue description being scrollable after selecting issue template
- Remove suggested colors hover underline (ClemMakesApps) - Remove suggested colors hover underline (ClemMakesApps)
- Shorten task status phrase (ClemMakesApps) - Shorten task status phrase (ClemMakesApps)
- Fix project visibility level fields on settings - Fix project visibility level fields on settings
......
...@@ -13,6 +13,9 @@ ...@@ -13,6 +13,9 @@
this.buildDropdown(); this.buildDropdown();
this.bindEvents(); this.bindEvents();
this.onFilenameUpdate(); this.onFilenameUpdate();
this.autosizeUpdateEvent = document.createEvent('Event');
this.autosizeUpdateEvent.initEvent('autosize:update', true, false);
} }
TemplateSelector.prototype.buildDropdown = function() { TemplateSelector.prototype.buildDropdown = function() {
...@@ -72,6 +75,10 @@ ...@@ -72,6 +75,10 @@
TemplateSelector.prototype.requestFileSuccess = function(file, skipFocus) { TemplateSelector.prototype.requestFileSuccess = function(file, skipFocus) {
this.editor.setValue(file.content, 1); this.editor.setValue(file.content, 1);
if (!skipFocus) this.editor.focus(); if (!skipFocus) this.editor.focus();
if (this.editor instanceof jQuery) {
this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
}
}; };
TemplateSelector.prototype.startLoadingSpinner = function() { TemplateSelector.prototype.startLoadingSpinner = function() {
......
...@@ -13,10 +13,12 @@ feature 'issuable templates', feature: true, js: true do ...@@ -13,10 +13,12 @@ feature 'issuable templates', feature: true, js: true do
context 'user creates an issue using templates' do context 'user creates an issue using templates' do
let(:template_content) { 'this is a test "bug" template' } let(:template_content) { 'this is a test "bug" template' }
let(:longtemplate_content) { %Q(this\n\n\n\n\nis\n\n\n\n\na\n\n\n\n\nbug\n\n\n\n\ntemplate) }
let(:issue) { create(:issue, author: user, assignee: user, project: project) } let(:issue) { create(:issue, author: user, assignee: user, project: project) }
background do background do
project.repository.commit_file(user, '.gitlab/issue_templates/bug.md', template_content, 'added issue template', 'master', false) project.repository.commit_file(user, '.gitlab/issue_templates/bug.md', template_content, 'added issue template', 'master', false)
project.repository.commit_file(user, '.gitlab/issue_templates/test.md', longtemplate_content, 'added issue template', 'master', false)
visit edit_namespace_project_issue_path project.namespace, project, issue visit edit_namespace_project_issue_path project.namespace, project, issue
fill_in :'issue[title]', with: 'test issue title' fill_in :'issue[title]', with: 'test issue title'
end end
...@@ -27,6 +29,17 @@ feature 'issuable templates', feature: true, js: true do ...@@ -27,6 +29,17 @@ feature 'issuable templates', feature: true, js: true do
preview_template preview_template
save_changes save_changes
end end
it 'updates height of markdown textarea' do
start_height = page.evaluate_script('$(".markdown-area").outerHeight()')
select_template 'test'
wait_for_ajax
end_height = page.evaluate_script('$(".markdown-area").outerHeight()')
expect(end_height).not_to eq(start_height)
end
end end
context 'user creates a merge request using templates' do context 'user creates a merge request using templates' do
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment