Salesforce Developer Community

Brandon Coston 15
NEWBIE
0 Points
Member since 2017

Chatter

Feed
0

Best Answers
0

Likes Received
1

Likes Given
2

Questions
2

Replies

Summer '18 lightning:input checkbox clearing value on check/uncheck

I'm seeing an issue with lightning:input on Summer '18 that was working fine on Spring. We have a list of lightning:input checkboxes that represent some filters on one of our components. We pass in the list of filter objects and iterate over them. We set the value attribute on the input to the filter object to reference it when you save your filter selections. We're seeing that on checking or unchecking the checkbox it's clearing out the object we're storing in the value attribute.

This is a very simple lightning application that demonstrates this.

<aura:application extends="force:slds">
    <aura:attribute type="Map" name="checkboxValue" default="{'label':'box', 'isChecked':false, 'identifier':'id1'}" />
    <lightning:input aura:id="checkboxSingleTest" type="checkbox" label="{!v.checkboxValue.label}" checked="{!v.checkboxValue.isChecked}" value="{!v.checkboxValue}"/>
    checked: {! v.checkboxValue.isChecked }
    <BR/>
    label: {! v.checkboxValue.label }
    <BR/>
    identifier: {! v.checkboxValue.identifier }
    <BR/>
    checkboxValue: {! v.checkboxValue }
</aura:application>

If you run that in a summer org you will see that it clears out the whole map stored in v.checkboxValue. However if you run it in Spring it works just fine. Has anyone else run into this issue or know of any work around? I did see a stackExchange question that was very similar except the person was trying to use the same boolean for both checked and value (https://salesforce.stackexchange.com/questions/218310/summer-18-lightning-checkbox-values). The answer posted there was basically don't use the same value for both and it's not really intended how that person was using it, which in my case I'm not doing the same thing. I'm using value as an identifier which is what the documentation says is a valid use for it (https://computing-nosoftware-5620.lightning.force.com/docs/component-library/bundle/lightning:input/documentation). It gives an example near the bottom of that page and says

Additionally, when working with checkboxes, radio buttons, and toggle switches, use aura:id to group and traverse the array of components. You can use get("v.checked") to determine which elements are checked or unchecked without reaching into the DOM. You can also use the name and value attributes to identify each component during the iteration. The following example groups three checkboxes together using aura:id.

Was mainly trying to figure out if there's a work around I'm unaware of, or if I should try opening a case for it being a bug or if this is intended behavior and I was using it incorrectly in previous releases? Anyone seen this same thing or have any advice? One work around I could do is change it so that value stores a string identifier and then iterate over the objects to update them when I need to. However this would mean a lot of rework of this component outside of what I've talked about in this ticket and a bit of a performance hit because our app is dealing with a two dimensional array of filters. I'm hoping to avoid that rework if possible.

Brandon Coston 15
May 31, 2018
Like
0

3 replies

I'm running into some issues with event.dataTransfer.setDragImage() while using a library in a Lightning component.

I have a hierarchy lightning component and I'm using https://github.com/dabeng/OrgChart as a static resource to generate the hierarchy chart. For the most part it works great. However I am running into an issue with drag and drop functionality that I can't seem to figure out. That library has a section of code to generate a drag image when the user has panned the chart due to some older browsers (and Safari) not handling the transform correctly. The problem is that when used in a lightning component on Salesforce it throws an error. It seems like dataTransfer.setDragImage(img, xOffset, yOffset) doesn't work. I even tried simplifying the code in the library to one of the most basic examples in this tutorial and was still running into issues. The error I keep seeing is "[Argument 1 ('image') to DataTransfer.setDragImage must be an instance of Element]" however if I debug and look at the element that it's trying to use everything seems fine with it. Does anyone know if something in Locker Service is interfering with this or have any ideas what else may be going on?

Here's the function that is having issues:

createGhostNode: function (event) {
      var $nodeDiv = $(event.target);
      var opts = this.options;
      var origEvent = event.originalEvent;
      var isFirefox = /firefox/.test(window.navigator.userAgent.toLowerCase());
      if (isFirefox) {
        origEvent.dataTransfer.setData('text/html', 'hack for firefox');
      }
      var ghostNode, nodeCover;
      if (!document.querySelector('.ghost-node')) {
        ghostNode = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        ghostNode.classList.add('ghost-node');
        nodeCover = document.createElementNS('http://www.w3.org/2000/svg','rect');
        ghostNode.appendChild(nodeCover);
        $nodeDiv.closest('.orgchart').append(ghostNode);
      } else {
        ghostNode = $nodeDiv.closest('.orgchart').children('.ghost-node').get(0);
        nodeCover = $(ghostNode).children().get(0);
      }
      var transValues = $nodeDiv.closest('.orgchart').css('transform').split(',');
      var scale = Math.abs(window.parseFloat((opts.direction === 't2b' || opts.direction === 'b2t') ? transValues[0].slice(transValues[0].indexOf('(') + 1) : transValues[1]));
      ghostNode.setAttribute('width', $nodeDiv.outerWidth(false));
      ghostNode.setAttribute('height', $nodeDiv.outerHeight(false));
      nodeCover.setAttribute('x',5 * scale);
      nodeCover.setAttribute('y',5 * scale);
      nodeCover.setAttribute('width', 120 * scale);
      nodeCover.setAttribute('height', 40 * scale);
      nodeCover.setAttribute('rx', 4 * scale);
      nodeCover.setAttribute('ry', 4 * scale);
      nodeCover.setAttribute('stroke-width', 1 * scale);
      var xOffset = origEvent.offsetX * scale;
      var yOffset = origEvent.offsetY * scale;
      if (opts.direction === 'l2r') {
        xOffset = origEvent.offsetY * scale;
        yOffset = origEvent.offsetX * scale;
      } else if (opts.direction === 'r2l') {
        xOffset = $nodeDiv.outerWidth(false) - origEvent.offsetY * scale;
        yOffset = origEvent.offsetX * scale;
      } else if (opts.direction === 'b2t') {
        xOffset = $nodeDiv.outerWidth(false) - origEvent.offsetX * scale;
        yOffset = $nodeDiv.outerHeight(false) - origEvent.offsetY * scale;
      }
      if (isFirefox) { // hack for old version of Firefox(< 48.0)
        nodeCover.setAttribute('fill', 'rgb(255, 255, 255)');
        nodeCover.setAttribute('stroke', 'rgb(191, 0, 0)');
        var ghostNodeWrapper = document.createElement('img');
        ghostNodeWrapper.src = 'data:image/svg+xml;utf8,' + (new XMLSerializer()).serializeToString(ghostNode);
        origEvent.dataTransfer.setDragImage(ghostNodeWrapper, xOffset, yOffset);
      } else {
        origEvent.dataTransfer.setDragImage(ghostNode, xOffset, yOffset);
      }
    }

I also tried simplifying it down to this code and it still throws the same error:

createGhostNode: function (event) {
      var $nodeDiv = $(event.target);
      var origEvent = event.originalEvent;
      var ghostNode = document.createElement('img');
      ghostNode.classList.add('ghost-node');
      ghostNode.setAttribute('width', 50);
      ghostNode.setAttribute('height', 50);
      ghostNode.setAttribute('background-color', 'red');
      $nodeDiv.closest('.orgchart').append(ghostNode);
      origEvent.dataTransfer.setDragImage(ghostNode, 0, 0);
    }

Brandon Coston 15
February 28, 2018
Like
0

2 replies

createObjectURL - A Component Error has occurred!

Hi,
I'm working on a custom picture resize before uploading to Salesforce. I'm receiving an error after update od Sprint 19.
error message

The issue is in this line:

img.src = _URL.createObjectURL(file);

Not sure exactly where is an issue.

The whole code is here:

var _URL = window.URL;
        var img = new Image(),
        resizeWidth = 2000,
        quality = 0.5;
        img.src = _URL.createObjectURL(file);
        img.onload = function () {
            var cvs = document.createElement('canvas');
            var resizeRatio = img.width / resizeWidth;
            cvs.width = img.width / resizeRatio;
            cvs.height = img.height / resizeRatio;
            var ctx = cvs.getContext("2d").drawImage(img, 0, 0, (img.width), (img.height), 0, 0, (img.width / resizeRatio), (img.height / resizeRatio));
            var newImageData = cvs.toDataURL('image/jpeg', quality);
            var base64 = 'base64,';
            var dataStart = newImageData.indexOf(base64) + base64.length;
            var fileContents = newImageData.substring(dataStart);
            self.uploadProcess(component, file, fileContents);
        }

Thank you for help.

Pavel Navratil
January 15, 2019
Like
1