https://stackblitz.com/edit/angular-pxppfk-s4ix7b?file=tsconfig.json

Change target in tsconfig in this stackblitz to targer es2022 to recreate bug

The inner circle of radio buttons are incorrectly scaled/positioned in Bootstrap themes. The radio buttons in bootstrap theme are by default dependent on "rem" unit. For applications, that specify different base for "rem" unit, than 16px, it is possible to naturally override dimensions of the radio button without any specific overrides.

In example application, the following points are important:

1. :root specifies font-size=24px. So 1rem=24px.

2. Radio buttons uses size="small". The width and height then defaults to 0.75rem=18px.

Important note, is that the wrong positioning of inner circle is most visible when scaling down the browser view. There is offset by 1px to the sides. The image in the attachments is screenshot from the application and demonstrates the offset in pixels from the sides. The first number above the radio button is the offset of the inner circle in pixels from the left, the second number after "/" is the offset of inner circle from the right.

This issue appears only if the dimensions are being increased/decreased in respect to the default "medium" size. If the radio button is scaled using "scale" CSS function, then the scaling is correctly preserved. Also I didn't notice any problem for the "medium" sized radio button in any browser view. The root font-size might not be important for bug to be reproducible, but inconsistencies are then more visible.

when click kendo slider increment or decrement tile it's moving two small steps.

My case instead of moving two steps, one step need to move

Using the Editor component with Form Support, if I choose the style Heading 1 and type some letter.

I clean the value using only backspace key on the keyboard and the value of the form control is <h1></h1>.

This is reproductible on the demo : https://www.telerik.com/kendo-angular-ui/components/editor/forms/#toc-template-driven-forms

• Choose Heading 1 style
• Type AAA
• The form value = <h1>AAA</h1>
• Clean the value using backspace
• The form value = <h1></h1>

Expected result

• The form value should be empty

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

When a detail row is used, the moment you expand one row and scroll, it automatically loads the last items from the dataset.

Ex expand row 1 - start scrolling, and it suddenly loads 5xx th row+;

When grouping is also enabled - expanding the detail row under one group, expands it under all groups.

The stackbliz is from the kendo demo page for virtualscroll (with the added detail row).

If you have a kendo grid table with some data over multiple pages and you go e.g. to the last page and then reload the data, resulting with less pages - the table is empty and you have to manually click on the first page to see the data. Here is a working example: 

https://codesandbox.io/s/upbeat-lamarr-d67m8k?file=/src/app/app.component.ts

Step 1. Go to the last page
Step 2. Click on the button "'Reset data" <- you see no data
Step 3. Click on the first page <- You see the data

Use the basic usage example from https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/

Click in the area next to the baseball chip.

The list with available objects pops up.

Click in the place where the cursor is, the popup won't close.

Click in the right half of the component, the popup closes.

It seems it's the input element which swallows the click event.

I would expect the popup to be closed, no mather where I click in the component

Here is a simple example:

HTML:

<kendo-listview
  [height]="400"
  [data]="notes$ | async"
  class="k-d-flex-overflow-auto"
  (scrollBottom)="loadMore()">
  <ng-template kendoListViewHeaderTemplate>
    <span title>Reminders</span>
  </ng-template>
  <ng-template kendoListViewItemTemplate let-dataItem="dataItem">
    <app-message-note [note]="dataItem"></app-message-note>
  </ng-template>
</kendo-listview>

TS: 

@Component({
  selector: 'app-message-list',
  templateUrl: `./message-list.component.html`,
  styles: [
    `
      .k-d-flex-overflow-auto {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: auto;
      }
    `,
  ],
})
export class MessageListComponent implements OnInit {
  notes$: Observable<NoteDto[]>;

  constructor(private replyService: ReplyNoteService) {}

  ngOnInit(): void {
    this.notes$ = this.replyService.getUserNotesList();
  }

  loadMore() {
    console.log('loading...');
  }
}

Without these styles scroll is not visible.

Current behavior: scroll to the bottom, nothing happens.

Expected behavior: scroll to the bottom "loading..." will be logged to the browser console.

Given: a kendo grid with resize enabled.

And: the input locked on kendo-grid-colum  is undefined (by ex. due the component class property not initialized)

When: the user double click on the column resize handler 

Actual: the column width is set to 0

Expected: the colum  autofit behaviour remain consistent and set the column width as usual.

There is a bug with the kendoGridGroupBinding directive when changing the input data and using virtual scrolling.  If you have many rows and scroll down to a lower virtual page and then change the input data to a small subset the grid will think there is no data.  And if you then change back to the full data set you have to start scrolling down before the grid repaints with data.  

Reproduction available here https://tyb2ys--run.stackblitz.io

Steps:

1. scroll down halfway in the grid

2. click the "Show subset" button.  Note the grid shows the no records message but should show three rows

3. click the "Show all" button.  Now the grid shows the scrollbar and the no records message is gone but it is not showing data.  You have to scroll down past where you previously were with all data before it repaints the rows

One workaround is to have an ngIf on the grid to destroy and recreate the grid when the input data changes, something like this:

If ComboBox is used in a form and its required, screen readers will not pick up this information since it is not passed on to the underlying input field.

The example a nice workaround, but a final solution should have this automatically implemented by the control.

https://stackblitz.com/edit/angular-2ck3gu

While the grid is initially loading data, the "No records available." message is confusing and provides no useful information.

Expected behavior - when the grid is initially loading, don't display the message as the rows/data might very well appear

To reproduce basically just go to the grid demo page (refresh if needed) and pay attention to the grid loading: https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/

Example in our project - intuitively you'd think that the grid has no records until you see the loader; in any case, the message looks out of place:

Test Environment:
Browser: Edge browser Version 114.0.1823.51 (Official build) (64-bit)
OS: Windows 22H2

Steps to Reproduce:

1. Open the URL - https://angular-kendo-dropdown-list.stackblitz.io/ in edge browser.
2. Press Tab key and navigate to “Select gender” dropdown.
3. Run fastpass in Accessibility insights for web extension.

Actual Result: Fastpass run shows "Ensures every ARIA input field has an accessible name" error for “Select gender” dropdown.

Expected Result: Every ARIA input field has an accessible name
Fix ONE of the following:
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute

Reproduce the bug with

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <button (click)="show = !show">Show/hide</button>
    <ng-container *ngIf="show">
      <div class="example-config">
        Selected value is: {{ value | kendoDate: "MM/dd/yyyy" }}
      </div>
      <div class="example-wrapper" style="min-height: 400px">
        <p>Select a date:</p>
        <kendo-datepicker
          [(value)]="value"
          fillMode="outline"
        ></kendo-datepicker>
        <p>
          (use Alt+↓ to open the calendar, ← and → to navigate, ↑ to increment
          and ↓ to decrement the value)
        </p>
      </div>
    </ng-container>
  `,
  styles: [
    `
      kendo-datepicker {
        width: 170px;
      }
    `
  ]
})
export class AppComponent {
  public show = false;
  public value: Date = new Date(2000, 2, 10);
}

error displayed:

"TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at set fillMode [as fillMode] (progress-kendo-angular-dateinputs.mjs:9186:53)
    at Object.ngOnChangesSetInp"

in file
node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs

at

 /**
     * Sets the fillMode of the component.
     *
     * The possible values are:
     * * `solid` (Default)
     * * `flat`
     * * `outline`
     * * `none`
     *
     */
    set fillMode(fillMode) {
        this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
        this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
        this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
        if (newFillMode !== 'none') {
            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
        }
       

import { AfterViewInit, Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <button (click)="show = !show">Show/hide</button>
    <ng-container *ngIf="show">
      <div class="example-config">
        Selected value is: {{ value | kendoDate: "MM/dd/yyyy" }}
      </div>
      <div class="example-wrapper" style="min-height: 400px">
        <p>Select a date:</p>
        <kendo-datepicker
          [(value)]="value"
          [fillMode]="fillMode"
        ></kendo-datepicker>
        <p>
          (use Alt+↓ to open the calendar, ← and → to navigate, ↑ to increment
          and ↓ to decrement the value)
        </p>
      </div>
    </ng-container>
  `,
  styles: [
    `
      kendo-datepicker {
        width: 170px;
      }
    `
  ]
})
export class AppComponent implements AfterViewInit {
  public show = false;
  public value: Date = new Date(2000, 2, 10);

  public fillMode = "solid";

  ngAfterViewInit() {
    Promise.resolve().then(() => (this.fillMode = "outline"));
  }
}