[4.0.0-beta.13] ion-virtual-scroll: does not handle css class correctly

[cjorasch]

Bug Report

Ionic Info

4.0.0-beta.13

Describe the Bug
If you use <ion-virtual-scroll> and assign a css class to an item then the logic to append additional classes does not include a delimiter.

The following code is used in the ionic component:

// From: virtual-scroll.tsx
const VirtualProxy: FunctionalComponent<{dom: VirtualNode[]}> = ({ dom }, children, utils) => {
  return utils.map(children, (child, i) => {
    const node = dom[i];
    const vattrs = child.vattrs || {};
    let classes = vattrs.class || '';
    // *** ADDS CLASS WITHOUT DELIMITER ***
    classes += 'virtual-item ';
    if (!node.visible) {
      classes += 'virtual-loading';
    }
    return {
      ...child,
      vattrs: {
        ...vattrs,
        class: classes,
        style: {
          ...vattrs.style,
          transform: `translate3d(0,${node.top}px,0)`
        }
      }
    };
  });
};

If an item is rendered with a class then the class names are incorrect.

For example <div class="my-class"> renders as <div class="my-classvirtual-item">. It should be <div class="my-class virtual-item">

A fix would be the following changes:

    classes += ' virtual-item'; // *** SPACE ADDED BEFORE, REMOVED AFTER ***
    if (!node.visible) {
      classes += ' virtual-loading'; // *** SPACE ADDED BEFORE ***
    }

[paulstelzer]

Thanks for your issue! Could you please check if this is still an issue in beta.17? That would be very nice :)

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.