When an item, which has submenu, from the menu dropdown is hovered the submenu appears. But if you click on the hovered item the submenu disappears.
Expected Behaviour
When an item, which has submenu, from the menu dropdown is hovered and then clicked the submenu should stay visible.
MInimal Reproduction
I'm providing a reproduction from Kendo React code examples.
https://stackblitz.com/edit/react-jqhjyv?file=index.js
When the listbox has many items (roughly 200 and growing) the item attribute makes the listbox act slow when you want to click the item.
Even if the item render only returns the same value as not setting the item attribute. It seems like all the items re-render when it gets clicked?
Also in this example https://www.telerik.com/kendo-react-ui/components/listbox/customization/ it is possible to drag and drop a custom item.
But this is not working when we copy exactly the same code from the example. The drag event gets triggered but nothing happens.
Both lists have items to avoid this bug: https://github.com/telerik/kendo-react/issues/1300
I can post my source code but it is literally the same as the example. When we remove the item attribute the drag and drop works again.
Hello,
After updating the kendo version in my project to "^5.1.0" I've noticed that some errors are appearing in our console when we are trying to resize items in the Scheduler.
"use-resize-item.js:53 Unable to preventDefault inside passive event listener invocation."
I have attached a video with the error.
Thanks!
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.
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.
In our unit tests, we sometimes want to be able to use the ByTestId methods of the React Testing Library to find bits of DOM created by a Kendo component. However, setting a data-testid attribute (or really any data- attribute) on a Kendo component does not always result in the attribute appearing anywhere in the final DOM.
To demonstrate, below is a test suite (also included in the zip) where I tried putting a data-testid attribute on the Kendo components Input, TextArea, Checkbox, Slider, SliderLabel, MultiSelect, and DatePicker, then checked if the attribute appeared in the rendered DOM. The tests for Input, TextArea, and Checkbox are successful. The ones for Slider, SliderLabel, MultiSelect, and DatePicker are not.
import { render, screen } from '@testing-library/react';
import { Input, TextArea, Checkbox, Slider, SliderLabel } from '@progress/kendo-react-inputs';
import { MultiSelect } from '@progress/kendo-react-dropdowns';
import { DatePicker } from '@progress/kendo-react-dateinputs';
// SUCCEEDS
describe('Kendo Input', () => {
it('supports data attributes', () => {
render(
<Input data-testid="the-input" />
);
const input = screen.queryByTestId('the-input');
expect(input).toBeTruthy();
});
});
// SUCCEEDS
describe('Kendo TextArea', () => {
it('supports data attributes', () => {
render(
<TextArea data-testid="the-text-area" />
);
const textarea = screen.queryByTestId('the-text-area');
expect(textarea).toBeTruthy();
});
});
// SUCCEEDS
describe('Kendo Checkbox', () => {
it('supports data attributes', () => {
render(
<Checkbox label={"Chad"} data-testid="the-checkbox" />
);
const checkbox = screen.queryByTestId('the-checkbox');
expect(checkbox).toBeTruthy();
});
});
// FAILS
describe('Kendo Slider & SliderLabel', () => {
it('supports data attributes', () => {
render(
<Slider min={1} max={2} data-testid="slider-root">
<SliderLabel position={1} data-testid="slider-label-1">One Fish</SliderLabel>
<SliderLabel position={2} data-testid="slider-label-2">Two Fish</SliderLabel>
</Slider>
);
const sliderRoot = screen.queryByTestId('slider-root');
const sliderLabel1 = screen.queryByTestId('slider-label-1');
const sliderLabel2 = screen.queryByTestId('slider-label-2');
// test them all at once so we can know the full scope of our failure/success
expect({
sliderRoot,
sliderLabel1,
sliderLabel2
}).toMatchObject({
sliderRoot: expect.anything(), // don't be null or undefined
sliderLabel1: expect.anything(), // don't be null or undefined
sliderLabel2: expect.anything() // don't be null or undefined
});
});
});
// FAILS
describe('Kendo MultiSelect', () => {
it('supports data attributes', () => {
render(
<MultiSelect data-testid="the-multi-select" />
);
const multiselect = screen.queryByTestId('the-multi-select');
expect(multiselect).toBeTruthy();
});
});
// FAILS
describe('Kendo DatePicker', () => {
it('supports data attributes', () => {
render(
<DatePicker data-testid="the-date-picker" />
);
const datepicker = screen.queryByTestId('the-date-picker');
expect(datepicker).toBeTruthy();
});
});
Set up a TimePicker with a `min` and `max`. For example
min={new Date(0, 0, 0, 0, 0)} max={new Date(0, 0, 0, 5, 0)}
Click on the text input to focus the 'hours' portion.
Roll the mouse scrollwheel up/down to change the hours.
You can 'scroll' past 5:00 and set the time to anything above the max.
You can also use the keyboard to enter any number outside the min/max.
Is this the expected behavior? Do we always have to add our own validation to check the min/max ourselves?
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?
Hi,
The Telerik example for Inline Editing with Custom Editors uses a dropdown list with reference data hardcoded into the custom dropdown cell. This isn't a realistic scenario for for production code with dynamic reference data. If you pass the reference data for the dropdown to the custom cell then the dropdown loses focus every time you change the selected value. This can be seen by shifting the localizedData in the Telerik example referenced earlier from myDropDownCell.tsx to main and passing it as a parameter: https://stackblitz.com/edit/react-9ycz1i?file=app/main.tsx
Is there a workaround for this issue?
Kind regards,
David
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!
Looking at the JSDoc for for `toDataSourceRequestString` and `toDataSourceRequest`, they both appear to have JSDoc above them, showing the parameter as:
* @param {DataRequestState} state - The state that will be serialized.
Should this actually have `@param {DataSourceRequestState}`?
Hello,
Our team has an issue with KendoReact Data Grid Control https://www.telerik.com/kendo-react-ui/components/grid/
Data disappears when the user groups the grid by any column and scrolls down to the end.
When the user scrolls up a bit from the bottom of the grid data blinks.
TreeList control doesn't look to be a good alternative in our case, because we need a grid with group, filter and sort functionality. Grid should work with thousands of records. Customer requires virtual scroll (paging can’t be used).
This issue can be reproduced when the grid has groupable option enabled.
Virtual scroll works as expected when groupable is set to false.
Stackblitz example:https://stackblitz.com/edit/react-g7rdjm?file=app%2Fmain.tsx
Can you please point us to the solution?
Hello,
Our team is using MobX-State-Tree (MST) and KendoReact TreeList control with virtual scrolling enabled. According to documentation MST model stores data as an observable array (https://mobx-state-tree.js.org/API/#array and https://mobx.js.org/api.html#observablearray).
The MST model’s field ‘tree’ is not a regular array, but a LegacyObservableArray.
From UI standpoint:
initially all tree nodes are collapsed
user clicks on i.e. 3rd tree node
selection is not displayed on any tree node (3rd node expected to be selected)
user expands 1st tree node - selection is set on the 3rd tree node
The following warning appears in the browser console.
Warning: Failed prop type: Invalid prop `data` of type `object` supplied to `TreeList`, expected `array`.
in TreeList (created by wrappedComponent)
in wrappedComponent (created by wrappedComponent)
in div (created by wrappedComponent)
in div (created by wrappedComponent)
in wrappedComponent
Model is defined as:
const TreeViewModel = types
.model('TreeViewModel', {
selectedItemUUID: types.maybe(types.string),
tree: types.optional(types.array(TreeNodeModel), []),
isLoaded: types.maybe(types.optional(types.boolean, false)),
treeTypes: types.optional(types.array(TreeNodeTypeModel), []),
})
.views((self) => ({
get treeCollection(): any {
return self.tree;
},
}))
Component is defined as:
return (<>
{!viewModel.isLoaded && loadingPanel}
<div className='treeListContainer' ref={stageCanvasRef}>
{treeListContainerHeight && <TreeList
style={{ maxHeight: `${treeListContainerHeight}px`, overflow: 'auto', }}
data={viewModel.treeCollection}
expandField={expandField}
subItemsField={subItemsField}
columns={columns}
selectedField={selectedField}
rowHeight={40}
scrollable="virtual"
/>}
</div>
</>);
The following workaround allows converting an observable array to a regular array.
.views((self) => ({
get treeCollection(): any {
return JSON.parse(JSON.stringify(self.tree)); // or self.tree.slice()
},
}))
This solution affects performance due to array copy.
Besides this TreeList uses an array copy. User’s selection and expanding don’t trigger related changes in the initial observable array in the model.
Related event handlers (i.e. onSelectionChange, onExpandChange) should be extended to make appropriate changes in the MST model.
Can you please extend KendoReact controls to support observable arrays?
Is there a better solution?