First undo after making a change does nothing

[graphics-et-al]

After making a change to the canvas captured in the history, the first undo does nothing.

Probable cause is the code:

  /**
   * It pushes the state of the canvas into history stack
   */
  fabric.Canvas.prototype._historySaveAction = function (e) {
    if (this.historyProcessing) return;
    if (!e || (e.target && !e.target.excludeFromExport)) {
// HERE pushes the CURRENT state to the end of the historyUndo array. When undoing for the first time, it loads the current state.
      const json = this._historyNext();
//
      this.historyUndo.push(json);
      this.historyNextState = this._historyNext();
      this.fire('history:append', { json: json });
    }
  };

It should be (as in previous versions)

  /**
   * It pushes the state of the canvas into history stack
   */
  fabric.Canvas.prototype._historySaveAction = function (e) {
    if (this.historyProcessing) return;
    if (!e || (e.target && !e.target.excludeFromExport)) {
// HERE pushes the PREVIOUS state to the end of the historyUndo array.
      const json = this.historyNextState;
      this.historyUndo.push(json);
      this.historyNextState = this._historyNext();
      this.fire('history:append', { json: json });
    }
  };

After making this change it works for me :)

[YoniZiv]

Was looking for a solution for this.
Did you actually change anything in the "should be" example?
I might be tired but they seem identical

[graphics-et-al]

Was looking for a solution for this. Did you actually change anything in the "should be" example? I might be tired but they seem identical

Oh I'm so very sorry! Have edited the 'Should be'. It works now.

Also another gotcha I found: if you're loading canvas programmatically, it can fire events that add to the history. Here's an example of how I do it...

// load the canvas from a data object to a canvas
export const loadCanvas = (canvas_data, _canvas) => {
    return new Promise((resolve, reject) => {
        // clear the canvas
        _canvas.clear();
        // rebuild the canvas from the objects contained in the data
        fabric.util.enlivenObjects(canvas_data.objects, (objs) => {
            // add items
            objs.forEach((item) => {
                _canvas.add(item);
            });
            // Do anything else you need to here e.g. add a background 
       
            // Clear the history
            canvas.clearHistory();
            // take a snapshot
            canvas.onHistory();
            // resolve the promise
            resolve(true);
        });
    });
};