Incorrect notification event triggered on first save of work item

[chadmcivor]

Incorrect notification event triggered on 1st save of work item.docx

I've implemented a custom control extension for the work item form, but have a problem with the initial save.
When I try to save the 1st work item update it performs the save but calls the onLoaded event not the onSaved event.
While the work item remains loaded, all subsequent attempts to save updates call the onSaved event as desired.
Is this a bug or is there something wrong with the way I've implemented the extension?

Actions to recreate problem:
1 - Open work item
2 - Update work item
3 - Save work item
4 - Update work item
5 - Save work item

In order to illustrate the problem I replaced my extension code with your WorkItemFromGroup extension sample. See attached doc with screenshots.

Extension code:

import {
IWorkItemChangedArgs,
IWorkItemFieldChangedArgs,
IWorkItemFormService,
IWorkItemLoadedArgs,
WorkItemTrackingServiceIds
} from "azure-devops-extension-api/WorkItemTracking";
import * as SDK from "azure-devops-extension-sdk";
import { Button } from "azure-devops-ui/Button";
import * as React from "react";
import { showRootComponent } from "../../index";

interface WorkItemFormGroupComponentState {
eventContent: string;
}

export class WorkItemFormGroupComponent extends React.Component<{}, WorkItemFormGroupComponentState> {
constructor(props: {}) {
super(props);
this.state = {
eventContent: ""
};
}

public componentDidMount() {
  SDK.init().then(() => {
    this.registerEvents();
  });
}

public render(): JSX.Element {
  return (
    <div>
      <Button
        className="sample-work-item-button"
        text="Click me to change title!"
        onClick={() => this.onClick()}
      />
      <div className="sample-work-item-events">{this.state.eventContent}</div>
    </div>
  );
}

private registerEvents() {
  SDK.register(SDK.getContributionId(), () => {
    return {
      // Called when the active work item is modified
      onFieldChanged: (args: IWorkItemFieldChangedArgs) => {
        console.log("onFieldChanged");
        this.setState({
          eventContent: `onFieldChanged - ${JSON.stringify(args)}`
        });
      },

      // Called when a new work item is being loaded in the UI
      onLoaded: (args: IWorkItemLoadedArgs) => {
        console.log("onLoaded");
        this.setState({
          eventContent: `onLoaded - ${JSON.stringify(args)}`
        });
      },

      // Called when the active work item is being unloaded in the UI
      onUnloaded: (args: IWorkItemChangedArgs) => {
        this.setState({
          eventContent: `onUnloaded - ${JSON.stringify(args)}`
        });
      },

      // Called after the work item has been saved
      onSaved: (args: IWorkItemChangedArgs) => {
        console.log("onSaved");
        this.setState({
          eventContent: `onSaved - ${JSON.stringify(args)}`
        });
      },

      // Called when the work item is reset to its unmodified state (undo)
      onReset: (args: IWorkItemChangedArgs) => {
        this.setState({
          eventContent: `onReset - ${JSON.stringify(args)}`
        });
      },

      // Called when the work item has been refreshed from the server
      onRefreshed: (args: IWorkItemChangedArgs) => {
        this.setState({
          eventContent: `onRefreshed - ${JSON.stringify(args)}`
        });
      }
    };
  });
}

private async onClick() {
  const workItemFormService = await SDK.getService<IWorkItemFormService>(
    WorkItemTrackingServiceIds.WorkItemFormService
  );
  workItemFormService.setFieldValue(
    "System.Title",
    "Title set from your group extension!"
  );
}

}

export default WorkItemFormGroupComponent;

showRootComponent();