JavaScript Components' "data-target" attribute is not working correctly

XMLWordPrintable

    • 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));    	
                    }

            Assignee:
            Unassigned
            Reporter:
            Pablo Culebras
            Votes:
            3 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: