ng2-semantic-ui breaks the application on mobile UC Browser

[yavorskiy]

Bug description:

I'm writing an app for China. The most popular browser in China - UC Browser. For a long time I worked with ng2-semantic-ui v0.8.4 everything worked perfectly. After I updated the library to version 0.9.4, app does not run on UC Browser. Unfortunately I can't track down an error. Maybe you can do it. Help me please, I do not want to dwell on the old version of you great lib.

Version of Angular, ng2-semantic-ui, and Semantic UI:

Angular: 4.3.2

ng2-semantic-ui: 0.9.4

Semantic UI: 2.2.11

[edcarroll]

Hi, so here is the diff between 0.9.3 and 0.9.4 - is there anything in there that stands out to you like it is a breaking change?

[yavorskiy]

There are no critical changes between the versions for me (0.9.3 - 0.9.4). @edcarroll I updated from 0.8.4 to 0.9.4 and maybe the problem arose even earlier. Tommorow morning, I'll go through all the versions starting from 0.8.5, so that I can understand exactly when the problems begin. At once I will write as soon as I will be defined with the version.

Thank you for dealing with my problem =)

[edcarroll]

Ahhh sorry completely misread your original message! If you could go through the versions to try and track down the problem that would be ideal - thank you! I'm sure we'll get to the bottom of this 😄

[publidex]

I am also having problems with the last update. I was using 0.9.2 and when i updated, the datepicker, popups no longer work. But the modal works correctly. Strange because it shows nothing on the console

[edcarroll]

@publidex are you also using UC Browser?

[publidex]

No. But I tested Chrome, Firefox and Edge. Desktop not mobile

[edcarroll]

Try deleting node_modules & package-lock.json and reinstalling, that may clear it up.

[publidex]

@edcarroll I think I figured out the problem. It looks like it's some conflict with the "BrowserAnimationsModule" when i remove it back to working perfectly.

[yavorskiy]

@edcarroll that's what I managed to find out (step by step):

Step 1

I created a new project in order to be sure that the error does not occur in my code and everything worked before the update. Here is the installed package:

  "dependencies": {
    "@angular/animations": "4.3.1",
    "@angular/common": "4.3.1",
    "@angular/compiler": "4.3.1",
    "@angular/core": "4.3.1",
    "@angular/forms": "4.3.1",
    "@angular/http": "4.3.1",
    "@angular/platform-browser": "4.3.1",
    "@angular/platform-browser-dynamic": "4.3.1",
    "@angular/router": "4.3.1",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "lodash": "^4.17.2",
    "rxjs": "5.4.2",
    "zone.js": "0.8.16"
  },
  "devDependencies": {
    "@angular/cli": "1.2.3",
    "@angular/compiler-cli": "4.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "8.0.17",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng2-semantic-ui": "0.9.0",
    "popper.js": "1.10.8",
    "protractor": "~5.1.0",
    "ts-node": "3.3.0",
    "tslib": "1.7.1",
    "tslint": "5.5.0",
    "typescript": "2.3.2",
    "web-animations-js": "2.3.1"
  }

popper.js and typescript v2.3.2 - avoid different ts mistakes. Here are the screenshots of the app, everything works fine. From left to right - Chrome & UC Browser:

Step 2

I upgraded ng2-semantic-ui to next available version - v0.9.0. App has broken down in UC Browser:

Step 3

Then I remove import of the main module import { SuiModule } from 'ng2-semantic-ui'; and start import in turn individual component modules, like import { SuiDropdownModule } from 'ng2-semantic-ui';. After every import, I checked the result, but result remains the same - in any mobile browser (Chrome, Firefox, Opera, Safari, native Android browser and Samsung browser) everything works, but not in UC Browser.

Step 4

I did not find the best option for debugging error in mobile UC Browser... I used this in index.html:

<body>
  <app-root>Loading...</app-root>
  <script>

    window.onerror = function(msg, url, linenumber) {
      alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
      return true;
    }

  </script>
</body>

Here is screenshot of app:

Then I climbed in vendor.bundle.js file, line 17935:

Problem here:

__decorate([
    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["J" /* HostListener */])("focusout", ["$event"]),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [FocusEvent]),
    __metadata("design:returntype", void 0)
], SuiDropdown.prototype, "onFocusOut", null);

Code is compiled, but it is seen thet app in UC Browser breaks FocusEvent in dropdown.

@edcarroll I hope that this will help you. I am ready to provide you with any additional information or help in additional tests =)

[edcarroll]

@yavorskiy-web amazing, thank you for such extensive testing!! So this is definitely due to the fact that UC Browser doesn't define a FocusEvent object. However, I'm not sure whether it provides the needed properties just without exposing that event type, so I've prepared a custom build that has those events replaced with any, to see if the properties are there even if the object isn't.

Could you please give it a go (download the attachment, and replace the directories in node_modules with the provided ones) and see if this fixes it, or if it just produces an error / breaks some functionality?

Thanks!

ng2-semantic-ui.zip

[edcarroll]

@publidex glad you got it sorted, strange that it was conflicting with that module given ng2-semantic-ui doesn't use it at all. Is everything ok not using it?

[yavorskiy]

@edcarroll thank you very much, tomorrow I will conduct tests and write the result, sorry for the delay.

[yavorskiy]

@edcarroll your custom build fixes the problem, everything works great! Thanks a lot, It's magic! =)

[edcarroll]

Awesome! Will make the change in the main app and release it officially next release 😄

[edcarroll]

@yavorskiy-web this is now live in 0.9.5, let me know if you have any more issues 😄