Details
-
Bug
-
Resolution: Obsolete
-
Medium
-
5.4.4
-
Severity 2 - Major
-
Description
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)); }