search

telerik / kendo-angular

Issue tracker - Kendo UI for Angular
http://www.telerik.com/kendo-angular-ui/
Other
466 stars 215 forks source link

(kendoTabStripTab) Failed to execute 'setAttribute' on 'Element': 'aria-disabled]' is not a valid attribute name. #4247

Closed andreElrico closed 5 months ago

andreElrico commented 5 months ago

Describe the bug

Im on Kendo-UI v15 for Angular. Just recently im getting this error "out of nowhere". It already had worked on v15. Im confused to be honest.

When I search my js-sources I can see where this problem is coming from. At the code marked location we can clearly see there is aria-disabled] instead of aria-disabled.

TabComponent.ɵcmp = /* @__PURE__ */_angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵdefineComponent"]({
  type: TabComponent,
  selectors: [["", "kendoTabStripTab", ""]],
  hostVars: 13,
  hostBindings: function TabComponent_HostBindings(rf, ctx) {
    if (rf & 2) {                                                                                  vvvvvvvvvvvvv 
      _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵattribute"]("aria-selected", ctx.activeClass)("aria-disabled]", ctx.disabledClass)("tabindex", ctx.tabIndex);
                                                                                                   ^^^^^^^^^^^^^^
      _angular_core__WEBPACK_IMPORTED_MODULE_1__["ɵɵclassProp"]("k-item", ctx.hostClasses)("k-tabstrip-item", ctx.hostClasses)("k-active", ctx.activeClass)("k-disabled", ctx.disabledClass)("k-focus", ctx.focusedClass);
    }
  },
  inputs: {
    tab: "tab",
    index: "index",
    tabStripClosable: "tabStripClosable",
    tabStripCloseIcon: "tabStripCloseIcon",
    customTabstripCloseIcon: "customTabstripCloseIcon",
    closeSVGIcon: "closeSVGIcon"
  },

To Reproduce The bug happens by simply having tabstrip-tab inside tabstrip

Expected behavior No error like: Failed to execute 'setAttribute' on 'Element': 'aria-disabled]' is not a valid attribute name.

Screenshots If applicable, add screenshots to help explain your problem.

Browser

Additional context Add any other context about the problem here.

From Package.json

    "@progress/kendo-angular-buttons": "^15.1.0",
    "@progress/kendo-angular-charts": "^15.1.0",
    "@progress/kendo-angular-common": "^15.1.0",
    "@progress/kendo-angular-dateinputs": "^15.1.0",
    "@progress/kendo-angular-dialog": "^15.1.0",
    "@progress/kendo-angular-dropdowns": "^15.1.0",
    "@progress/kendo-angular-excel-export": "^15.1.0",
    "@progress/kendo-angular-grid": "^15.1.0",
    "@progress/kendo-angular-inputs": "^15.1.0",
    "@progress/kendo-angular-intl": "^15.1.0",
    "@progress/kendo-angular-l10n": "^15.1.0",
    "@progress/kendo-angular-label": "^15.1.0",
    "@progress/kendo-angular-layout": "^15.1.0",
    "@progress/kendo-angular-menu": "^15.1.0",
    "@progress/kendo-angular-messages": "^1.56.0",
    "@progress/kendo-angular-notification": "^15.1.0",
    "@progress/kendo-angular-pdf-export": "^15.1.0",
    "@progress/kendo-angular-popup": "^15.1.0",
    "@progress/kendo-angular-progressbar": "^15.1.0",
    "@progress/kendo-angular-tooltip": "^15.1.0",
    "@progress/kendo-angular-treeview": "^15.1.0",
    "@progress/kendo-angular-upload": "^15.1.0",
    "@progress/kendo-data-query": "^1.7.0",
    "@progress/kendo-drawing": "^1.19.0",
    "@progress/kendo-font-icons": "^2.1.0",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-theme-default": "^7.2.0",
shannonvc commented 5 months ago

Adding to say we've had the same issue, it seems to be the minor version of Angular 17.3.0 that is causing the issue to appear "out of nowhere". It can easily be replicated with the examples on the Kendo Angular docs.

If you go on the TabStrip docs, the example works fine without errors https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/ Looking at the iframe code the Angular version is 17.2.2

If you then click "Open In" -> "Stackblitz". In this setup Angular 17.3.0 will be used and here the TabStrip will throw the error in question. https://stackblitz.com/edit/angular-aiwevy?file=src%2Fapp%2Fapp.component.ts

slavenai commented 5 months ago

A fix is now available in the latest develop version of kendo-angular-layout package:

https://stackblitz.com/edit/angular-kf4xf5-vxhmz6?file=package.json

slavenai commented 5 months ago

The fix is now part of v15.3.0 of kendo-angular-layout package.