Popover breaks when multiline template literal is used.

[fleck]

When I initialize a popover with a multiline string:

      const template = `
        <div class="popover" role="tooltip">
          <div class="arrow"></div>
          <h3 class="popover-title"></h3>
          <div class="popover-content"></div>
        </div>` ;

      this.popover = new Popover(ribbonElement, {template, placement: 'left'});

I get the error 'Cannot read property 'offsetWidth' of null' from this line of code:
arrowWidth = arrow[offsetWidth]; arrowHeight = arrow[offsetHeight];

[thednp]

Perhaps you didn't NAME the option?

this.popover = new Popover(ribbonElement, {template: template, placement: 'left'});

[fleck]

This is in the chrome console which supports property shorthand. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Property_definitions So our 2 examples are functionally the same.

[fleck]

here's a fiddle reproducing the bug https://jsfiddle.net/jonfleck/obskwpta/14/

[thednp]

I will have a look at this asap. Thanks for reporting.

[thednp]

OK so I've done some changed to your fiddle example, it's set (and I think it was) to pure JS, and it's working as expected:

• I replaced ̀ (accent grave) with ' (single quotation)
• I properly wrapped each row in ' (single quotation)
• I added a title and desc to the template
• all new lines are concatenated properly into the template string via +

All looks good to me now. The previous notation wasn't proper JavaScript, the ̀ (accent grave) is meant for something else and not contain strings. So we're now closing this.

[fleck]

The backtick is valid syntax. It was introduced to JavaScript to make templating easier. From the docs: “The default function just concatenates the parts into a single string.” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

[thednp]

If that's the case, you're free to do any contribution you consider fit to solve that particular issue. I still think this backtick support isn't fully implemented in our browsers, or else it should work, nothing to do with our component at all.

[felschr]

This issue comes up for me when the string starts with a line break.
So OP's issue could be fixed by using the following template literal instead:

const template = `<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
  </div>`;

Alternatively using .trim() on the string would fix the issue as well.

[thednp]

@felschr @fleck please test latest master and confirm issue is fixed. Need your input before pushing to npm.

Thanks

[jcorporation]

contentString = contentString.trim(); breaks, if the content option is not set. I use only the template option.

[thednp]

@jcorporation what do you suggest?

[jcorporation]

trim only, if contentString != null

[jcorporation]

@thednp: works for me, thanks