-
Bug
-
Resolution: Obsolete
-
Medium
-
5.4.4
-
Severity 2 - Major
-
The method bind from the file autocomplete-content.js is not setting correctly the values in the given field as the specification says.
https://developer.atlassian.com/display/CONFDEV/JavaScript+Components
- data-template: a template used to populate the value for the input
- data-target: a target element selector to update its value with the value provided by data-template.
This is typically useful when you want to display the user's full name in the input field but submit the username
to the server, so another input element needs to be updated.
<div class="field-group"> <label for="autocompleteField">Autocomplete Field</label> <input class="text autocomplete-space" id="autocompleteField" name="autocompleteField" data-max="10" data-none-message="No results" data-template="{key}" data-target="#deptSpace"> <label for="deptSpace">Target</label> <input type="hidden" class="text" id="deptSpace" name="deptSpace"> </div>
What is happening if you run the code is that as soon as you click on the desired value you want the original field will get the data-template (in this case
{key}) value and the target field will get the default value
{name}.
This all happens as I said inside the bind function:
var bind = function(input, contentTypes, valueTemplate, displayHandler) { var $input = $(input), boundKey = "data-autocomplete-content-bound"; if ($input.attr(boundKey)) return; if (typeof contentTypes == "string") contentTypes = [contentTypes]; $input.attr(boundKey, "true").attr("autocomplete", "off"); var typesString = contentTypes.join(","), maxResults = $input.attr("data-max") || 10, alignment = $input.attr("data-alignment") || "left", spaceKey = $input.attr("data-spacekey"), noResults = $input.attr("data-none-message"), searchLinkMessage = $input.attr("data-search-link-message"), template = $input.attr("data-template") || valueTemplate, targetSelector = $input.attr("data-target"), dropDownTarget = $input.attr("data-dropdown-target"), dropDownPosition = null; if (dropDownTarget) { dropDownPosition = $(dropDownTarget); } else { dropDownPosition = $("<div></div>"); $input.after(dropDownPosition); } dropDownPosition.addClass("aui-dd-parent autocomplete"); $input.focus(function () { // Some places like the Link Browser allow a select element to change the space. // The autocomplete should re-cache the spaceKey on focus. spaceKey = $input.attr("data-spacekey"); }); $input.quicksearch(AJS.REST.getBaseUrl() + "search/name.json", null, { onShow: function() { $input.trigger("open.autocomplete-content", { contentTypes: contentTypes}); }, makeParams : function(val) { var params = { "max-results": maxResults, pageSize: maxResults, type: typesString, query: val }; if (spaceKey) { params.spaceKey = spaceKey; } return params; }, dropdownPlacement: function(dd) { dropDownPosition.append(dd); }, makeRestMatrixFromData : makeRestMatrixFromData, addDropdownData : function (matrix) { if (!matrix.length) { if (noResults) { matrix.push([{ name: noResults, className: "no-results", href: "#" }]); } } if (searchLinkMessage) { var value = AJS.escapeHtml($input.val()); var searchPrompt = AJS.format(searchLinkMessage, value); matrix.push([{ className: "search-for", name: searchPrompt, href: "#" }]); } return matrix; }, ajsDropDownOptions : { alignment: alignment, displayHandler: displayHandler, selectionHandler: function (e, selection) { AJS.debug("autocomplete-content: ajsDropDownOptions.selectionHandler"); if (selection.find(".search-for").length) { $input.trigger("selected.autocomplete-content", { contentTypes: contentTypes, searchFor: $input.val() }); return; } if (selection.find(".no-results").length) { AJS.log("no results selected"); this.hide(); e.preventDefault(); return; } var contentProps = selection.data("properties"); // HERE!!!!!! $input.val(AJS.template(template).fillHtml(contentProps.restObj)); if (targetSelector) { var value = AJS.template(valueTemplate).fillHtml(contentProps.restObj); $(targetSelector).val(value); } // UNTIL HERE $input.trigger("selected.autocomplete-content", { contentTypes: contentTypes, content: contentProps.restObj, selection: selection }); this.hide(); e.preventDefault(); } } }); };
Workaround/Fix
Use the following code instead
if (targetSelector) { $input.val(AJS.template(valueTemplate).fillHtml(contentProps.restObj)); var value = AJS.template(template).fillHtml(contentProps.restObj); $(targetSelector).val(value); } else { $input.val(AJS.template(template).fillHtml(contentProps.restObj)); }
[CONFSERVER-33227] JavaScript Components' "data-target" attribute is not working correctly
Resolution | New: Obsolete [ 11 ] | |
Status | Original: Gathering Impact [ 12072 ] | New: Closed [ 6 ] |
Fix Version/s | New: 6.14.0 [ 83892 ] |
Workflow | Original: JAC Bug Workflow v3 [ 2897560 ] | New: CONFSERVER Bug Workflow v4 [ 3001004 ] |
Workflow | Original: JAC Bug Workflow v2 [ 2789369 ] | New: JAC Bug Workflow v3 [ 2897560 ] |
Workflow | Original: JAC Bug Workflow [ 2715096 ] | New: JAC Bug Workflow v2 [ 2789369 ] |
Symptom Severity | Original: Major [ 14431 ] | New: Severity 2 - Major [ 15831 ] |
Workflow | Original: Confluence Workflow - Public Facing - Restricted v5 - TEMP [ 2381131 ] | New: JAC Bug Workflow [ 2715096 ] |
Status | Original: Open [ 1 ] | New: Gathering Impact [ 12072 ] |
Labels | Original: affects-server editor editor-other | New: affects-server editor editor-other tidy |
Workflow | Original: Confluence Workflow - Public Facing - Restricted v5 [ 2272986 ] | New: Confluence Workflow - Public Facing - Restricted v5 - TEMP [ 2381131 ] |
Thank you for your interest in this ticket. The Confluence Server and Data Center team released a major upgrade to the editor in 6.14. Due to the age of this ticket and/or lack of updates, we suspect that this issue is no longer relevant or was resolved as a result of the upgrade and are now closing this ticket.
If this issue is still a problem in your Confluence instance in version 6.15 or later, please tag me in your comment and we can reopen this ticket for review.
You can read more about the editor upgrade in the 6.14 Release Notes.
Thanks
Makisa Appleton | Senior Product Manager, Confluence Server and Data Center