jquery autocomplete forces popup blocker response when ENTER used to select

Question

I am using jquery UI autocomplete in an Office add-in to give the user a list of potential links to click.

When you choose from the autocomplete it uses window.open to create a new tab in your default browser.

It works fine if you type, then CLICK on a resulting option surfaced by the autocomplete.

However, if you keyboard up/down to highlight the different results, then click ENTER to choose one, a popup blocker message is created. Microsoft will not allow such behavior in an add-in. I suppose this is happening because of javascript controls over direct user input to run window.open.

I am experimenting with blocking the ENTER key, but this feels like a bad move for users - they'll click and expect some action and nothing will happen.

I guess I could use dialogAPI to create a modal...but I don't want to block the user's access to the Word document (in this case).

I've tried creating a hidden button which I programmatically click but that doesn't seem to work either (understandably). Popup blocker message shows.

Any ideas on how to work around this for the benefit of users?

Answer 1

I realize code examples are necessary for anyone not intimately involved with Office.js add-ins to be able to respond...

The issue is specific to Windows, because Office.js add-ins are stuck using IE11 to run Office.js webapps (MSFT have to support Windows 7 users, who can't run Edge). On Mac or Word Online this issue isn't as severe.

The root cause is trying to open a new window (window.open) programmatically rather than by a specific user click. So, if your add-in is running in Windows and you have a button with an href that URL will open in the default browser no worries.

But if your code needs to produce the link then IE11/Windows will complain, thinking you're spamming the user with popups (with IE11 set to default security). MSFT will not pass your add-in with this behavior.

I added a modal (a real one - thank you @RickKirkham) that creates a clickable button on the fly for the user to click. It's a "please confirm your desire to open this URL" modal.

I have resubmitted to MSFT but don't know if this will pass their style and user experience requirements. I don't think there is any other way around this issue aside from blocking the use of the ENTER key on jquery UI autocomplete inputs and similar.

I will update this answer once I make it through MSFT review.