tracker issue : CF-4203437

When I’m inserting a numeric into the ID attributes on some of my HTML tags I’m getting a space prepended to the numeric value.  It happened to me again today.

In the following example, the value in the data-saqid attribute and the id attribute are the problems. You can see the prepended space in front of the ID numbers.

HTML:
<li class="list-group-item" draggable="true" data-saqid=" 14" id="saq- 14" ondragstart="assignment.drag(event)">
                <b>2018</b> - SAQ D
</li>


Custom Tag:
<cfscript>
      param name="attributes.merchant" default="#application.factory.getMerchant(1)#";
      
      assignedSAQs = attributes.merchant.getAssignedSAQs();
      campus = attributes.merchant.getCampus();
      school = campus.getSchool();
      unassignedSAQs = school.getCurrentUnassignedSAQs(attributes.merchant);
</cfscript>

<style>
      .card {
            width: 100%
      }
</style>

<cfoutput>
      <div class="col">
            <form action="" class="form" id="frmAssignment" name="frmAssignment">
                  <div class="row">
                        <div class="col">
                              <div class="card" id="masterSAQs" ondragover="assignment.allowDrop(event)" ondrop="assignment.drop(event)">
                                    <div class="card-header">Master SAQs</div>
                                    <ul class="list-group list-group-flush">
                                          <cfloop array="#unassignedSAQs#" item="saq">
                                                <li class="list-group-item" draggable="true" data-saqID="#saq.getID()#" id="saq-#saq.getID()#" ondragstart="assignment.drag(event)">
                                                      <b>#saq.year#</b> - #saq.name#
                                                </li>
                                          </cfloop>
                                    </ul>
                              </div>
                        </div>
                        <div class="col">
                              <div class="card" id="assignedSAQs" ondragover="assignment.allowDrop(event)" ondrop="assignment.drop(event)">
                                    <div class="card-header">Assigned SAQs</div> 
                                    <ul class="list-group list-group-flush">
                                          <cfloop array="#assignedSAQs#" item="saq">
                                                <li class="list-group-item" draggable="true" data-saqID="#saq.getID()#" id="saq-#saq.getID()#" ondragstart="assignment.drag(event)">
                                                      <b>#saq.year#</b> - #saq.name#
                                                </li>
                                          </cfloop>
                                    </ul>
                              </div>
                        </div>
                  </div>
            </form>
      </div>
</cfoutput>


SAQ.getID():
      <cffunction name="getID" access="public" returntype="Numeric" hint="returns the ID">
            <cfreturn variables.id>
      </cffunction>

I have a workaround where I construct the ID strings as local variables outside of the HTML attribute and then use the local variable inside the attribute.  This seems to work but is not ideal.

Attachments:

Comments: