Office-js: addHandlerAsync ItemChanged not working on OWA

[Herz3h]

Expected Behavior

Callback should be called every time a new email is selected.

Current Behavior

Callback is never called

Steps to Reproduce, or Live Example

Manifest looks like the following:

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp
          xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
          xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0"
          xsi:type="MailApp">

  <!-- Begin Basic Settings: Add-in metadata, used for all versions of Office unless override provided. -->

  <!-- IMPORTANT! Id must be unique for your add-in, if you reuse this manifest ensure that you change this id to a new GUID. -->
  <Id>904ab911-0807-4d85-94c5-0f53cdbd4a55</Id>

  <!--Version. Updates from the store only get triggered if there is a version change. -->
  <Version>1.0.0.0</Version>
  <ProviderName>TestProvider</ProviderName>
  <DefaultLocale>fr-Fr</DefaultLocale>
  <!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
  <DisplayName DefaultValue="Mail" />
  <Description DefaultValue="test"/>

  <!-- Icon for your add-in. Used on installation screens and the add-ins dialog. -->
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png" />
  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-80.png.png"/>

  <!--If you plan to submit this add-in to the Office Store, uncomment the SupportUrl element below-->
  <SupportUrl DefaultValue="https://google.fr" />

  <!-- Domains that will be allowed when navigating. For example, if you use ShowTaskpane and then have an href link, navigation will only be allowed if the domain is on this list. -->
  <AppDomains>
    <AppDomain>AppDomain1</AppDomain>
    <AppDomain>AppDomain2</AppDomain>
    <AppDomain>AppDomain3</AppDomain>
  </AppDomains>
  <!--End Basic Settings. -->

  <Hosts>
    <Host Name="Mailbox" />
  </Hosts>
  <Requirements>
    <Sets>
      <Set Name="Mailbox" MinVersion="1.3" />
    </Sets>
  </Requirements>
  <FormSettings>
    <Form xsi:type="ItemRead">
      <DesktopSettings>
        <SourceLocation DefaultValue="https://localhost:3000/index.html"/>
        <RequestedHeight>250</RequestedHeight>
      </DesktopSettings>
    </Form>
  </FormSettings>

  <Permissions>ReadWriteMailbox</Permissions>
  <Rule xsi:type="RuleCollection" Mode="Or">
    <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" ItemClass="IPM.Note" />
  </Rule>
  <DisableEntityHighlighting>false</DisableEntityHighlighting>

  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Requirements>
      <bt:Sets DefaultMinVersion="1.3">
        <bt:Set Name="Mailbox" />
      </bt:Sets>
    </Requirements>
    <Hosts>
      <Host xsi:type="MailHost">

        <DesktopFormFactor>
          <!-- Location of the Functions that UI-less buttons can trigger (ExecuteFunction Actions). -->
          <FunctionFile resid="Commands.Url" />

          <!-- Message Read -->
          <ExtensionPoint xsi:type="MessageReadCommandSurface">
            <!-- Use the default tab of the ExtensionPoint or create your own with <CustomTab id="myTab"> -->
            <OfficeTab id="TabDefault">
              <!-- Up to 6 Groups added per Tab -->
              <Group id="msgReadGroup">
                <Label resid="GroupLabel" />
                <!-- Launch the add-in : task pane button -->
                <Control xsi:type="Button" id="msgReadOpenPaneButton">
                  <Label resid="TaskpaneButton.Label" />
                  <Supertip>
                    <Title resid="TaskpaneButton.Label" />
                    <Description resid="TaskpaneButton.Tooltip" />
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16" />
                    <bt:Image size="32" resid="Icon.32x32" />
                    <bt:Image size="80" resid="Icon.80x80" />
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <SourceLocation resid="Taskpane.Url" />
                  </Action>
                </Control>
                <!-- Go to http://aka.ms/ButtonCommands to learn how to add more Controls: ExecuteFunction and Menu -->
              </Group>
            </OfficeTab>
          </ExtensionPoint>
          <!-- Go to http://aka.ms/ExtensionPointsCommands to learn how to add more Extension Points: MessageRead, AppointmentOrganizer, AppointmentAttendee -->
        </DesktopFormFactor>
      </Host>
    </Hosts>

    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html" />
        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html" />
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="GroupLabel" DefaultValue="Contoso Add-in"/>
        <bt:String id="TaskpaneButton.Label" DefaultValue="Show Taskpane"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Opens a pane displaying all available properties."/>
      </bt:LongStrings>
    </Resources>
    <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
        <Requirements>
            <bt:Sets DefaultMinVersion="1.5">
                <bt:Set Name="Mailbox" />
            </bt:Sets>
        </Requirements>
        <Hosts>
            <Host xsi:type="MailHost">

                <DesktopFormFactor>
                    <!-- Location of the Functions that UI-less buttons can trigger (ExecuteFunction Actions). -->
                    <FunctionFile resid="Commands.Url" />

                        <!-- Message Read -->
                    <ExtensionPoint xsi:type="MessageReadCommandSurface">
                        <!-- Use the default tab of the ExtensionPoint or create your own with <CustomTab id="myTab"> -->
                            <OfficeTab id="TabDefault">
                                <!-- Up to 6 Groups added per Tab -->
                                <Group id="msgReadGroup">
                                    <Label resid="GroupLabel" />
                                        <!-- Launch the add-in : task pane button -->
                                    <Control xsi:type="Button" id="msgReadOpenPaneButton">
                                        <Label resid="TaskpaneButton.Label" />
                                        <Supertip>
                                            <Title resid="TaskpaneButton.Label" />
                                            <Description resid="TaskpaneButton.Tooltip" />
                                        </Supertip>
                                        <Icon>
                                            <bt:Image size="16" resid="Icon.16x16" />
                                            <bt:Image size="32" resid="Icon.32x32" />
                                            <bt:Image size="80" resid="Icon.80x80" />
                                        </Icon>
                                        <Action xsi:type="ShowTaskpane">
                                            <SourceLocation resid="Taskpane.Url" />
                                            <SupportsPinning>true</SupportsPinning>
                                        </Action>
                                    </Control>
                                    <!-- Go to http://aka.ms/ButtonCommands to learn how to add more Controls: ExecuteFunction and Menu -->
                                </Group>
                            </OfficeTab>
                        </ExtensionPoint>
                        <!-- Go to http://aka.ms/ExtensionPointsCommands to learn how to add more Extension Points: MessageRead, AppointmentOrganizer, AppointmentAttendee -->
                    </DesktopFormFactor>
                </Host>
            </Hosts>

            <Resources>
                <bt:Images>
                    <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
                    <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
                    <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
                </bt:Images>
                <bt:Urls>
                    <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html" />
                    <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html" />
                </bt:Urls>
                <bt:ShortStrings>
                    <bt:String id="GroupLabel" DefaultValue="Contoso Add-in"/>
                    <bt:String id="TaskpaneButton.Label" DefaultValue="Show Taskpane"/>
                </bt:ShortStrings>
                <bt:LongStrings>
                    <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Opens a pane displaying all available properties."/>
                </bt:LongStrings>
            </Resources>
        </VersionOverrides>
  </VersionOverrides>
</OfficeApp>

Code is like the following:

Vue.config.productionTip = false
Office.initialize = () => {

    // new Vue({
    //   store: CredentialsStore,
    //   render: h => h(App),
    //   router: router,
    // }).$mount('#app')

    console.log('iteminit');
    Office.context.mailbox.removeHandlerAsync(Office.EventType.ItemChanged);
    Office.context.mailbox.addHandlerAsync(Office.EventType.ItemChanged, (type) => {
        console.log('itemChanged' + type);
    }, (result: Office.AsyncResult<void>) => {
        console.log('item ' + result.status);
    });
};

• Additional details:
  
  
  
  1. I generated a vue app and then only manifest using yeoman
  
  

Context

I simply need to know when a different mail is selected from the reading pane on the left

Your Environment

• Platform [PC desktop, Mac, iOS, Office Online]: Mac
• Host [Excel, Word, PowerPoint, etc.]: Outlook Web App
• Office version number: Latest (365 subscription)
• Operating System: Os 10.14.5
• Browser (if using Office Online): Chrome 80.0.3987.132 64bits

Useful logs

Only iteminit is logged. result.status returns "succeeded" but my callback is never called.

Also this is logged when taskpane is pinned and I select a different mail:

VM12018 outlook-web-16.01.alpha.js:19 Uncaught TypeError: Cannot set property 'permissionLevel' of undefined
    at e.initialize (VM12018 outlook-web-16.01.alpha.js:19)
    at Object.OSF.DDA.OMFactory.manufactureEventArgs (VM12018 outlook-web-16.01.alpha.js:19)
    at Object.onEvent (VM12018 outlook-web-16.01.alpha.js:19)
    at VM12018 outlook-web-16.01.alpha.js:19
    at J (VM12018 outlook-web-16.01.alpha.js:19)

[exextoc]

Can you please confirm if different mail is in the same folder or different folder? We are trying to repro the issue.

[Herz3h]

@exextoc I mainly test for mails in the same folder. But selecting a mail in a different folder doesn't work either.

[abrahamdio]

I am able to repro this as well (OWA). But for my case, it's not working only if I am selecting different emails in a thread.

Update: In email threads, itemChange isn't triggered for emails that are already expanded. (i.e. after clicking the email row to get recipient information, full body content). In other words, when the email is first expanded, it will trigger the callback.

[Herz3h]

I found the problem. Since I'm using typescript and compiled was throwing errors that Office is not defined, i thought that doing:

import '@microsoft/office-js/dist/office'

Would be a good idea. This indeed removes the typescript errors, but also causes this problem + (the Uncaught TypeError: Cannot set property 'permissionLevel' of undefined. Could be related to #1026 btw)

[abrahamdio]

@Herz3h The issue still persists, can we have this issue re-opened? (Not related to permissionLevel error).

With your sample code, try changing emails _within_ a thread (emails need to be expanded first), and itemChanged will not be called.

[Herz3h]

@abrahamdio I've tried clicking an already expanded mail and it indeed, doesn't trigger itemChanged event. I've reopened the issue 👍

[exextoc]

Thanks for reporting this issue. We are able to repro this and It has been put on our backlog. We unfortunately have no timelines to share at this point.

[amiram]

It happens to me also, but only in the drafts folder. Sometimes I get the event and sometimes I don't. Even when I get the event, sometimes the mailbox.item is null.

[Tanddant]

So I kept getting this error, I eventually got a different error which lead me to this post and as is turns out my layout page (which I thought I wasn't using) had a reference to Office.js causing it to load twice and cause unexpected behavior.

[oyvindo]

I have a similar problem with shared inboxes in owa. The the event callback runs, but Office.context.mailbox.item does not change after the first e-mail has been selected. The item is stuck with the content of the firstly selected email in the shared mailbox folder inbox. Randomly the content is updated(then stuck with the new content) while selecting different emails. Going back to my own inbox, everything works as expected.

...
Office.onReady(() => {
      Office.context.mailbox.addHandlerAsync(
        Office.EventType.ItemChanged, e => console.log(e.initialData)
      );
      // Office loaded
      // Do stuff...
    });
...

where Office.context.mailbox,item would equal e.initialData.
So, almost the same except ItemChange fires, but the args remains unchanged.

This problem occurred at some point recently as it most certainly worked before. I cannot tell exactly when, as this is not tested very often and is hard for the users to detect.
Are there any resent changes in https://appsforoffice.microsoft.com/lib/beta/hosted/office.js

[exextoc]

We have fixed this issue and its 100% live.