This is a bug on your documentation website.

Go to https://www.telerik.com/kendo-react-ui/components/grid/ for example to see that the side panel on the left is empty in an Edge browser. It flickers then it disappears.

It works fin in Chrome and Firefox. 

In our project we control column widths manually as we have complex logic on how wide each column should be, based on a number of external criteria. However, those widths are not fixed and might change during the lifetime of the data grid.

This was not causing any problems up to version 5.11.0 but after we upgraded the Kendo packages this controlled behavior of the column widths broke:

kendo-react-grid v5.11.0 example (working):
https://codesandbox.io/s/crazy-bird-ss7mgl?file=/app/main.tsx

kendo-react-grid latest example (broken):
https://codesandbox.io/s/dazzling-antonelli-wxsflj?file=/app/main.tsx

If we inspect the elements of the data grid, we can see that there is an inline style attribute on the header and body tables, setting the total width of those <table> elements to the sum of its columns. However, that value is not updating after the initial mount as it was prior to v5.12.0 which effectively makes the column widths uncontrollable.

As per the subject, you can no longer use the Calendar to select a date in a month before the currently selected Date. Please see the following demo:

https://stackblitz.com/edit/react-xc2oxm-wgsfhy?file=app%2Fmain.tsx

Steps to reproduce:

• Click on the Calendar button
• Click on any month before the currently selected month
• Click on any date in the month
• Observe that the day is changed correctly but the month is incorrectly incremented by one

This error is not observed if you:

• type in a date
• use the mousewheel to scroll to the earlier date instead of clicking on the month
• use Firefox instead of Chrome

We aren't certain but don't believe this error was present before the latest Chrome 113 update. The error is reproducible in all versions of KendoReact from 5.2.0 onwards.

Current Behaviour

When a table is created in the text editor and multiple columns are selected an error is thrown.

Errors:
TypeError: Cannot read properties of undefined (reading 'localsInner')

TypeError: Cannot read properties of undefined (reading 'eq')

Expected Behaviour

When a table is created in the text editor and multiple columns are selected an error must not appear and the user must be able to merge or split the cells.

MInimal Reproduction

I'm providing a reproduction from Kendo React code examples.
https://stackblitz.com/edit/react-su15wr?file=app%2Fmain.tsx

Package
"@progress/kendo-react-editor": "^5.11.0"

Hi,

If you use kendo-theme-bootstrap for most Kendo React inputs, it results in bootstrap styling being applied to the input e.g. https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/ or https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/. With the Bootstrap theme selected the DatePicker and Combobox have blue shadows on focus.

This is not true for the DropDrownList: https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/. The border on focus does not match Bootstrap styling.

Kind regards,

David

I'm submitting a...

• Bug report

Current behavior

After the latest accessibility improvements available with R1 2023 of the KendoReact library, the aria-required attribute is missing in most of the DropDowns.

Expected behavior

The aria-required attribute should be rendered in the DOM once the MultiSelect definition contains a required attribute like this:

  <MultiSelect required data={sports} onChange={onChange} value={value} />

Minimal reproduction of the problem with instructions

1. Open this StackBlitz example
2. Inspect the MultiSelect component to see that the aria-required in not rendered

Hi,

Please see the following example of the dropdownlist with bootstrap theme applied:

https://stackblitz.com/edit/react-ejxe44?file=index.html

I have updated the bootstrap cdn to latest. Notice that bootstrap styling is applied to the dropdowns including focus shadowing.

Now please see the exact same example but with theme customisation using a custom scss file:

https://stackblitz.com/edit/react-tuq49c-g6ofwn?file=index.scss

Notice that bootstrap styling is no longer applied to the dropdowns, which do not have focus shadowing.

Kind regards,

David

Build Dates & Run Dates range picker don't highlight days

We are currently passing a React.Node which contains both text and custom icons to the DropDownButton text property. The automatically generated aria-label of the DropDownButton returns [object Object] instead of any recognizable text.

Steps to Reproduce:

• Create a DropDownButton with text property set to a React.Node - eg:
  

<DropDownButton text={<div>test text</div>}>

• Inspect the DropDownButton aria-label value using the developer console
  

Expected Result:

aria-label contains the text inside the React.Node

aria-label="test text dropdownbutton"

Actual Result:

aria-label contains [object Object]

aria-label="[object Object] dropdownbutton"

I've already log an issue on Github -> https://github.com/telerik/kendo-react/issues/1303

Submitting here as it is an important regression with React 18 and ReactDom.createRoot breaking Time picker.

A little thing, but users remember position of UI elements more than anything else. The filter buttons on the grid by default are not in the same place though for all filter types.

It would be preferable if the filter buttons were all on the same side, regardless of the filter type (e.g., some types put it on the left, while others put it on the right). Pictures below for context.

On this page: https://www.telerik.com/kendo-react-ui/getting-started/

There's a syntax mismatch in end-of-line semicolons.

This line ends with a semicolon:

```js
import '@progress/kendo-theme-default/dist/all.css';
```

This line does not end with a semicolon:

```js
import { Calendar } from '@progress/kendo-react-dateinputs'
```

All teams that I know of consider it to be an error to do both ways in the same file.

The solution is to pick one way then be consistent. The broader solution is to use a linter, such as ESLint, that can process the code to ensure you're using your expected syntax and formatting.

A TimePicker control will take all scroll events if the mouse cursor is over it, whether the element has focus or not, and prevent the scroll from bubbling up to the page. This prevents a page from scrolling as soon as the mouse cursor touches a TimePicker.

Using Kendo rect v5.1.0 in FireFox v98 on OSX. (Issue does not happen in Chrome)

You can view the problem in the demo page: https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/
Just try to scroll down the view, and as soon as the TimePicker is under the mouse cursor, the page can no longer be scrolled until you move the cursor off the control.

After updating the kendo version in my project to "^5.1.0" I've noticed that both grid pager dropdown and normal dropdowns won't close when clicked outside if the dropdown is opened using the arrow icon.

I've attached a video with the issue.

Is there any workaround for this?

According to https://www.telerik.com/kendo-react-ui/components/installation/source-code/#toc-source-repository the repo should be updated nightly. However it does not seem to be.

~/Projects/kendo-react-private (master)   git remote -v
origin https://kendo.git.progress.com/kendo-react-private.git (fetch)
origin https://kendo.git.progress.com/kendo-react-private.git (push)

~/Projects/kendo-react-private (master)   git fetch --tags

~/Projects/kendo-react-private (master)   git pull origin master
From https://kendo.git.progress.com/kendo-react-private
 * branch                master     -> FETCH_HEAD
Already up to date.

~/Projects/kendo-react-private (master)   git tag | grep v5
v5.0.0
v5.0.0-dev.202201182040
 
~/Projects/kendo-react-private (master)   git log
commit 4bf2535e414ba2f342ddbef8daac9ec052f04cc2 (HEAD -> master, tag: v5.0.0, origin/master, origin/HEAD)
Author: kendo-bot <kendouiteam@progress.com>
Date:   Tue Jan 18 22:41:34 2022 +0200

    chore(release): publish 5.0.0-dev.202201182040

v5.0.0 seems to be the latest tag. Could someone verify that the github repo is actually being updated?

Thanks for any help!

Hi team, 

Im not sure if this is a bug or an incomplete feature, so please advise.

1) TabStrip / Window behavior in v4.8.0 with bootstrap theme 4.40.0, see https://stackblitz.com/edit/react-wdzeyo?file=index.html
Please note the style and behaviour of the window, its above the modal and can be dragged anywhere on the screen, even though it was rendered from within the TabStripTab component

2) TabStrip / Window behavior in v4.9.0 with bootstrap theme 4.42.0, see https://stackblitz.com/edit/react-zhkfdp?file=app%2Fmain.jsx
As you can immediately see in this example, the TabStripTab heading is also above the modal, an obvious bug
My concerns are around how the window can no longer be dragged outside the TabStripTab container. Is this by design, beacuse in my use case, my tabs are smaller than my windows.

Note: I have not tested the windows with any other components.

Please advise.

Many Thanks,
Grant