title: FabricJS: Object controls not working until common selection
body: <p>I am creating a product configurator using Vue and FabricJS.</p>
  <p>I have created a canvas using</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>this.canvas = new fabric.Canvas("canvas");</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div id="wrapper"&gt;
      &lt;div id="left"&gt;&lt;/div&gt;
      &lt;canvas id="canvas"/&gt;
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>After I add an object to the canvas (IText, Textbox, Image, using <code>new fabric.IText(...)</code>) and select it with mouse, I am not able to use object controls to resize, scale, skew or rotate the object. However, I can move the object on canvas. After I add another object, select both of them at once and deselect again, the controls are all of a sudden working as intended. I was not able to reproduce the issue on JsFiddle, everything works there.</p>
  <p><a href="https://i.stack.imgur.com/Y0zpW.gif" rel="nofollow noreferrer">Controls not working until both objects are selected</a></p>
  <p>I encoutered the problem using various browsers.</p>
  <p>Am I missing some canvas property, which enables this immediately after adding? Or is that a bug in Fabric.js?</p>