Update Description to make clear incompatibility with IE11

[garethjwelsh]

Hi,
Think the documentation and description of this very good product should make clear that it is incompatible with IE11.
Many developers will probably be working in companies who will still be supporting IE11, and it would save a lot of stress for them to highlight that this can't be used with that browser.

[calebhughes]

#54 There's already an issue for improving the documentation

[chrissainty]

Thanks for raising this @garethjwelsh. As this control only works with Blazor and there is a clear definition of the browsers Blazor supports on the official Blazor site, do you think there is a need to restate all of that? Or do you think it would be enough to just add something along the lines of this control only works with Blazor supported browsers?

[garethjwelsh]

Hi,
The Blazor site suggests that ie11 is supported using server-side Blazor and some extra polyfills. I tested with the latest polyfill.js from Microsoft and latest nuget package and the component did not work.
I think there is still the expectation that Blazor would work in ie11 and the incompatibility should probably be highlighted.

https://docs.microsoft.com/en-us/aspnet/core/blazor/supported-platforms?view=aspnetcore-3.1

See section on Blazor server for the comparability details.

[chrissainty]

That's interesting feedback, I'll raise that with the Blazor team as that's not the general perception I've encountered, usually, it's the other way round, people think Blazor only works with the latest and greatest.

Could you tell me when you performed your test, did Blazor work and this component didn't? Or did nothing work?

[garethjwelsh]

Hi, Application was Core 3.1 Server Side Blazor. Quite a simple application but integrated with authentication and Api backend. The application runs fine as a Blazor App and is currently being tested predominantly in IE11 and is running fine. Attempted to add this component to it and it did not work and disconnected the Blazor app from the server. Ideally I would happily forget about ie11 and just work with the latest and greatest, alas many of our customers are slow to upgrade! Sent from Samsung Mobile on O2

…

-------- Original message -------- From: Chris Sainty <notifications@github.com> Date: 13/02/2020 16:36 (GMT+00:00) To: Blazored/Typeahead <Typeahead@noreply.github.com> Cc: garethjwelsh <garethjwelsh@hotmail.com>, Mention <mention@noreply.github.com> Subject: Re: [Blazored/Typeahead] Update Description to make clear incompatibility with IE11 (#112) That's interesting feedback, I'll raise that with the Blazor team as that's not the general perception I've encountered, usually, it's the other way round, people think Blazor only works with the latest and greatest. Could you tell me when you performed your test, did Blazor work and this component didn't? Or did nothing work? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#112?email_source=notifications&email_token=ADBZFWHIUG7JMGRRT57P4A3RCVZH3A5CNFSM4KUVH4O2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELVVWDI#issuecomment-585849613>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ADBZFWELKX3CKNUUCG2W55LRCVZH3ANCNFSM4KUVH4OQ>.

[chrissainty]

That's great, thanks for the info @garethjwelsh. I'll look into this as I would expect the component to work. I don't suppose you have any errors or traces?

[calebhughes]

I encounter an error in IE 11 using polyfills as well.

[2020-02-13T18:44:29.634Z] Error: Microsoft.JSInterop.JSException: Could not find 'blazoredTypeahead' in 'window'. Error: Could not find 'blazoredTypeahead' in 'window'. at Anonymous function (http://localhost:9924/_framework/blazor.server.js:8:30742) at p (http://localhost:9924/_framework/blazor.server.js:8:30693) at Anonymous function (http://localhost:9924/_framework/blazor.server.js:8:31414) at L (http://localhost:9924/js/blazor.polyfill.min.js:10:49553) at e.jsCallDispatcher.beginInvokeJSFromDotNet (http://localhost:9924/_framework/blazor.server.js:8:31384) at Anonymous function (http://localhost:9924/_framework/blazor.server.js:1:19193) at e.prototype.invokeClientMethod (http://localhost:9924/_framework/blazor.server.js:1:19171) at e.prototype.processIncomingData (http://localhost:9924/_framework/blazor.server.js:1:17160) at connection.onreceive (http://localhost:9924/_framework/blazor.server.js:1:10267) at i.onmessage (http://localhost:9924/_framework/blazor.server.js:1:38

Presumably breaking this way because IE11 doesn't like the arrow syntax in the blazored_typeahead.js

SCRIPT1002: Syntax error blazored-typeahead.js (3,26)

[chrissainty]

I would love to sort this and get it working wherever Blazor works. Perhaps the answer is to switch to TypeScript instead of vanilla JS so it can be compiled to a version of JS which is friendlier to older browsers. However, the trade-off is this makes the toolchain heavier for the project, but maybe it's the right thing to do.

[vertonghenb]

@chrissainty
If I'm not mistaken we're only using the .Focus and something something Blur in the JS part. So there will be some workarounds for this, TS seems like an overkill for 10 lines of JS.

I also don't see any other JS making it into the lib.

Update:

Replacing this with the current .js file could fix the issue (haven't tried it yet)

"use strict";

window.blazoredTypeahead = {
  assemblyname: "Blazored.Typeahead",
  setFocus: function setFocus(element) {
    if (element) element.focus();
  },
  // No need to remove the event listeners later, the browser will clean this up automagically.
  addKeyDownEventListener: function addKeyDownEventListener(element) {
    element.addEventListener('keydown', function (event) {
      var key = event.key;

      if (key === "Enter") {
        event.preventDefault();
      }
    });
  }
};

[garethjwelsh]

I also had a little play about with the javascript file, and arrived at the same code as above. So far it is working as expected, but in fairness I have not tested all the features available, will continue to do so and feedback.

[chrissainty]

@vertonghenb @garethjwelsh If the above solves the problem then I'm happy to go with that as the solution.

[chrissainty]

Update

I've been working on fixing this issue this morning. I've got everything working with the changes suggested by @vertonghenb.

However, there are a couple of new issues which have appeared. It seems the keyup/keydown events for moving through the suggestion list don't function on IE11. As well as clicking on the dropdown arrow to the right of the typeahead, the suggeston list doesn't open.

These features are using Blazors builtin events so this seems a framework problem to me rather than a library issue. It's possible the type of polyfills needed has changed and the library daddoon has no longer completely works.

@garethjwelsh what polyfills did you use to get your app running?