Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-33227

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

      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

            Makisa Appleton made changes -
            Resolution New: Obsolete [ 11 ]
            Status Original: Gathering Impact [ 12072 ] New: Closed [ 6 ]

            Atlassian Update - September 2019

            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

            Makisa Appleton added a comment - Atlassian Update - September 2019 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
            Makisa Appleton made changes -
            Fix Version/s New: 6.14.0 [ 83892 ]
            Katherine Yabut made changes -
            Workflow Original: JAC Bug Workflow v3 [ 2897560 ] New: CONFSERVER Bug Workflow v4 [ 3001004 ]
            Owen made changes -
            Workflow Original: JAC Bug Workflow v2 [ 2789369 ] New: JAC Bug Workflow v3 [ 2897560 ]
            Owen made changes -
            Workflow Original: JAC Bug Workflow [ 2715096 ] New: JAC Bug Workflow v2 [ 2789369 ]
            Owen made changes -
            Symptom Severity Original: Major [ 14431 ] New: Severity 2 - Major [ 15831 ]
            Owen made changes -
            Workflow Original: Confluence Workflow - Public Facing - Restricted v5 - TEMP [ 2381131 ] New: JAC Bug Workflow [ 2715096 ]
            Status Original: Open [ 1 ] New: Gathering Impact [ 12072 ]
            Said made changes -
            Labels Original: affects-server editor editor-other New: affects-server editor editor-other tidy
            Katherine Yabut made changes -
            Workflow Original: Confluence Workflow - Public Facing - Restricted v5 [ 2272986 ] New: Confluence Workflow - Public Facing - Restricted v5 - TEMP [ 2381131 ]

              Unassigned Unassigned
              a0d74c6231e9 Pablo Culebras
              Affected customers:
              3 This affects my team
              Watchers:
              3 Start watching this issue

                Created:
                Updated:
                Resolved: