I'm using the Kendo Angular DropDownList component and I'm facing a couple of accessibility issues.

I got two issues, the same as those I get in my own application using the DropDownList component.
I've attached the output for both issues below.

First issue and an explanation of the issue and its solutions can be seen in the first attachment.

Second issue and an explanation of the issue and its solutions can be seen in the sercond attachment.

Hello Progress Software Corporation,

We currently have an issue with the Date Input (Calendar) KendoUI Angular component. We need to use the selection mode "multiple" when selecting a full week. When the component loads, it's possible to select a full week with no issue but once you start to play around with the infinite scroll, then another week is selected instead of the desired one. The bug can be reproduced directly in the example provided in your documentation.

https://www.telerik.com/kendo-angular-ui/components/dateinputs/calendar/multiple-selection/

For example,

1. Try to select a full week. It works.
2. Do the same with the next week
3. Now scroll to the next month and repeat 1 and 2
4. Repeat 3

Repeat this process for more than 4 months and you will see the bug where the selection of the full week jumps to a completely different month.

Kind regards,

Rodrigo Rosenblüth 

On the DropDownList Grouping page and the MultiSelect Groping page, the first label (Meat) does not show in IE 11.

If the value string for a QR Code is greater than 100 characters the resulting QR Code cannot be scanned. Here's a StackBlitz demonstrating the issue:

https://stackblitz.com/edit/angular-2axafs?file=app/app.component.ts

Interestingly enough, this issue doesn't seem to be present in the AJAX version of the QR Code component as putting in a +100 character string on the example page results in a valid QR Code: https://demos.telerik.com/aspnet-ajax/barcode/examples/qrcode/defaultcs.aspx

https://angular-dxhzju.stackblitz.io

a. In "Show business hours" mode open event creating dialog and set start-end time that is outside of business hours specified, e.g. 07.00-07.30 when business hours are 08.00-20.00.

b. Press Save buttom.

c. Switch to "Show full day" mode.

Actual result - event is not shown.

Event appears only after, e.g. , pressing next arrow button and then pressing back arrow button.

Steps to reproduce:

1. Go to https://www.telerik.com/kendo-angular-ui/components/editor/tools/
2. Choose any font-size parameter in the "Select font size" dropdown
3. Open the dropdown again

Actual result: current value doesn't have selected styles in the dropdown

Expected result: current value in the dropdown is highlighted. Please see an example below:

Hi,

We would like to use the MultiSelect-Control in combination with kendoDropDownFilter and autoClose set to false. 

Now when we start typing and hit enter to select a value the filtering text is not cleared and the control is a faulty state.

StackBlitz: https://stackblitz.com/edit/angular-rc2kef?file=src%2Fapp%2Fapp.component.ts

There seems to be a styling bug in the Kendo theme for Bootstrap.

Default Bootstrap buttons has this strange shadow or border issue

Greetings,

A user told us our datetimepickers weren't opening their pop-ups at their selected values, they instead always open at today's date.
When you specify a focusedDate, which we never do, it does always open at that date's location, which is the intended behaviour afaik.
After creating a test app to track down the problem, it appears it has to do with the angular version.
The Stackblitz examples' package.json all use version 9.x.x, while we're currently using version 12.2.1.
We were using 11.2.0 before and it was broken there as well.
Downgrading everything to version 9 compatible packages indeed fixes the "error", but that's not something we're able to do.

Here's what our test app's package.json looks like:

{
"dependencies": {
    "@angular/animations": "12.2.1",
    "@angular/common": "12.2.1",
    "@angular/compiler": "12.2.1",
    "@angular/core": "12.2.1",
    "@angular/forms": "12.2.1",
    "@angular/platform-browser": "12.2.1",
    "@angular/platform-browser-dynamic": "12.2.1",
    "@angular/router": "12.2.1",
    "rxjs": "6.6.7",
    "tslib": "2.3.1",
    "zone.js": "0.11.4",
    "@progress/kendo-licensing": "1.2.0",
    "@progress/kendo-angular-dateinputs": "5.2.3",
    "@progress/kendo-angular-common": "2.0.1",
    "@progress/kendo-angular-l10n": "3.0.2",
    "@progress/kendo-angular-popup": "4.0.1",
    "@progress/kendo-angular-label": "3.1.0",
    "@progress/kendo-angular-intl": "3.1.1",
    "@progress/kendo-theme-default": "latest"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "12.2.3",
    "@angular/cli": "12.2.1",
    "@angular/compiler-cli": "12.2.1",
    "@angular/localize": "12.2.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "4.3.5"
  }
}

Our html file is as simple as the following:

<kendo-datetimepicker [formControl]="fc"></kendo-datetimepicker>

Steps to replicate:

1. Click to open the datetimepicker
2. Select a date (I always used 31 May 2021)
3. Click to open the datetimepicker again
4. It opens at today's date instead of at the selected value

Kind regards

For Angular Kendo Scheduler, if the Work week view is selected (default Mon-Fri), and Sunday is selected on the mini calendar to select the date to display - the previous week will be displayed. This is confusing, as simply toggling to Week view will then display the different, current week.

https://www.telerik.com/kendo-angular-ui/components/scheduler/views/day-week/

Expected behaviour: current week on mini calendar corresponds to the current week displayed regardless of whether full week or work week view is selected

Actual behaviour: selecting any day up until the desired "work week's start" (even if it's customized to start on e.g. Tuesday - and selecting Monday) will show previous week; switching then to full week view switches the week displayed to the one selected on mini calendar

------

Curiously, this does not happen for Kendo scheduler for JQuery (https://demos.telerik.com/kendo-ui/scheduler/index):

        

            ANCHOR
            
        
      
    `,
    styles: [`
      .content {
        padding: 30px;
        color: #787878;
        background-color: #fcf7f8;
        border: 1px solid rgba(0,0,0,.05);
      }
      .anchor {
        width: 80px;
        height: 40px;
        cursor: pointer;
        position: relative;
      }
      .example {
        position: absolute;
      }
    `]
})
export class AppComponent {
    private collision: Collision = { horizontal: 'flip', vertical: 'fit' };

    /* Move the 'example' to the bottom to see the collision behavior */
    private exampleTop = 400;

    private toggleText = 'Show';
    private show = false;
    public onToggle(): void {
        this.show = !this.show;
    }

}
" class="demo-file-sc-s3r0g1-1 jgyKPC" data-language="ts" style="box-sizing:border-box;position:relative;overflow:auto;margin-top:0px;margin-bottom:0px;padding:1rem;background:rgb(248, 248, 248);border:0px;min-height:3rem;line-height:1.5;white-space:pre-wrap;color:#1f1f1f;">
Toggle Popup

        
    `
})
export class AppComponent {
    private show = true;
}
" class="demo-file-sc-s3r0g1-1 jgyKPC" data-language="ts" style="box-sizing:border-box;position:relative;overflow:auto;margin-top:0px;margin-bottom:0px;padding:1rem;background:rgb(248, 248, 248);border:0px;min-height:3rem;line-height:1.5;white-space:pre-wrap;color:#1f1f1f;">    <button #anchor kendoButton (click)="show = !show">Toggle Popup</button>
    <kendo-popup [anchor]="anchor" *ngIf="show">
      <div style="padding: 30px; background-color: #fcf7f8">Popup content.</div>
    </kendo-popup>

Directly referencing anchor like that will not work on any new Angular project - it will fail template type checks.
Type HTMLButtonElement is not assignable to type ElementRef 

By default, the reference is to the component and not to the ElementRef.
Without a custom directive, this would have to use 
@ViewChild("anchor", { read: ElementRef }) popupButtonEl: ElementRef;

https://stackblitz.com/edit/angular-oc4d4c-ss8dyk?file=app/app.component.ts

1. If a detail row is expanded, the entire virtual scroll fails - showing whitespace/not loading new data once you scroll enough to trigger pagination/new dataset load. It remains broken even after collapsing the details row.
2. Scroll down and filter - you see white area. You need to scroll until it triggers data load to fix it.

The colorpicker is configured with positionMode  'absolute'  forcing body to resize instead of repositioning the popup if it would go off screen.

https://stackblitz.com/edit/angular-itnxyg?file=app/app.component.ts

        this.popupRef = this.popupService.open({
            anchor: this.activeColor,
            animate: this.popupSettings.animate,
            appendTo: this.popupSettings.appendTo,
            popupAlign: popupPosition,
            anchorAlign: anchorPosition,
            popupClass: 'k-colorpicker-popup',
            content: this.popupTemplate,
            positionMode: 'absolute'
        });

    .k-coloreditor-header {
        padding: $coloreditor-header-padding-y $coloreditor-header-padding-x 0;
    }

The style rule uses the two variables - with x and y respectively, yet has a hardcoded 0px value as a third parameter.

This causes x to only apply top padding, which is misleading.

Ts Code:

Html code: 

Hi,

If we format kendo-datepicker to (MMMM/dd/yyyy) and if we enter number of month in input then it is not reflecting and shows month in input field.

As you can see in screenshot, I called (valueChange) event to see the changed value, I have enter 10 in month input field so it shows two value in console, first one is when 1 is press and second is when 0 is pressed after 1 so it gives null and in input field it shows month instead of October.

It is working if we enter first letter of month but it should work if we enter month in number.

Please fix this issue asap.

Thanks.

Dear Support,

we have upgraded our Kendo Angular Menu control from 2.0.3 to 3.0.4 and we are experiencing the following problem:

• in case the main menu item is displayed on the rightmost position of the page
• and the main menu item has submenu items
• the entire menu dropdown disappears while it tries to open and display the submenu items

please check the attached screen recording and the following stackblitz repro:

• https://stackblitz.com/edit/angular-hi24pp?file=app/app.component.ts
  

additional info:

• the problem cannot be reproduced in case the page has a visible margin on the right side
• unfortunately our design does not allow us to add a margin on the right side, so we need a different solution

Thank you,

Ferenc Papp

autoClose is set to false and checkboxes true.
Clicking on that small margin area next to checkbox causes the dropdown to close.