Current Behaviour
When I lock columns In data grid with resizable columns - for example 1st and 3th and resize the 1st one - after we scroll horizontally the 3th column goes on top of the 1st column. This happens when we haven't set a width prop.
Expected Behaviour
Resized columns not overflowing on each other when scrolling horizontally and don't have width prop.
MInimal Reproduction
I'm providing a reproduction from Kendo React code examples.
https://stackblitz.com/edit/react-xvxy59?file=app%2Fmain.jsx
After the latest accessibility improvements available with R1 2023 of the KendoReact library, the aria-required attribute is missing in most of the DropDowns.
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} />
I am using KendoReact Draggable and Droppable and we find a bug when using it. This bug even happen in the official demo.
The bug is described below:
When a droppable area is rendered out of the originall window size, the droppable cannot detect the onDragEnter() & onDropLeave(), of course onDrop neither.
it seems that kendo did not handle when user scroll while dragging the draggables, so that when the draggables was dragged to a zone out of the original window size, it failed to detect it.(Figure4)
I have also found another bug which is when you drag the draggables and scroll, the draggable will somehow detacted with the cursor, but I somehow already fixed it. Maybe it gives some hint for you to fix this bug, maybe.
Title basically says it all. Issue can be easily observed in the basic Multiselect with virtualization example:
What seems strange is that I cannot reproduce this issue with the combobox virtualization, although I found a somewhat similar bug submitted for the combobox - https://github.com/telerik/kendo-react/issues/1450
Steps to reproduce:
Expected result: The text in the notification is read by the screen reader when the notification appears
Actual result: The notification text is not read out
https://stackblitz.com/edit/react-haejnu?file=app%2Fmain.tsx%3AL115
It is a common use case to provide Grid's dataItemKey property to make sure changes are properly reflected per documentation - https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-dataitemkey
However, when this accessor property is provided (usually a unique ID on all groups and items), Kendo uses it instead of its default auto-incremented `'ai' + absoluteIndex` key to index the <GridRow /> for each group's header and footer - giving them the same value and causing React to throw multiple warning about duplicate keys. This makes it unreliable to specify dataItemKey property when using the grouping feature with aggregate footers as it messes up with React's reconciliation mechanism.
How to reproduce (video attached):
1) open combobox
2) scroll to end of the item list
3) select last item 4999
4) open combobox again
Expected behavior: I would like to see the item list.
Actual behavoir: I see white area.
https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/virtualization/#toc-basic-configuration
https://www.telerik.com/kendo-react-ui/components/dropdowns/multiselect/virtualization/#toc-basic-configuration
https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/virtualization/#toc-basic-configuration
Build Dates & Run Dates range picker don't highlight days
Pre-Requisites (if any)
1. Go to system settings.
2. Navigate to 'Accessibility' and activate it.
3. Navigate to 'Contrast theme' and activate it.
4. Select 'Desert/Aquatic' High Contrast theme in the combo box.
Repro-Steps:
1. Open URL PowerGates Graph in Edge Dev.
2. Navigate to Build Date dropdown button using tab key and activate it.
3. Navigate to the ‘Within range ’calendar picker button and activate it.
4. Observe that issue.
Actual Result:
The Build Dates & Run Dates range picker both don't highlight the currently selected date does not outline the current date, as it does without contrast. Occurs in both Aquatic (High Contrast Black) and Desert (High Contrast White) modes.
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
Hi,
Please see the following example of the Upload component being used to transfer a single file to a byte array:
https://stackblitz.com/edit/react-u2kbu9?file=app/main.tsx
Notice that all packages are latest including react 18 but I have not switched to the new createRoot API, and as per react documentation "Until you switch to the new API, your app will behave as if it’s running React 17" - this warning can be seen in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded with 100% progress. You can see current state and new state of all events in the console window.
Now please see the exact same example but switched to the new createRoot API:
https://stackblitz.com/edit/react-y8fuya?file=app%2Fmain.tsx
Notice that the warning is no longer visible in the console window. When you upload a file, the FileReader onprogress and onload events result in the file being successfully uploaded but the file progress is overwritten. You can see current state and new state of all events in the console window - the new state from the onProgress event is lost, and the new state in the onStatusChange event reports zero progress.
I believe this is because of automatic batching in React 18.
Kind regards,
David
Hi Team,
If you take a look at my demo, I have 2 scheduler events, and I've created a custom SchedulerItem that renders the background of one of them to be blue.
When dragging the items around, the dragItem mains the same color with a bit of opacity, cool.
When resizing, the orange (?) one works great, this is the default color theme. However when I resize the blue one, while resizing, the resizeItem is an opaque blue, but the SchedulerItem underneath reverts back to the original default color scheme thereby mixing the colors.
Please advise.
Thanks,
Grant
Hi Team,
There is some unexpected behavior when resizing events after switching the Scheduler to 'Show Full Day'. Take a look at my sandbox, you'll notice, its barely anything, let alone anything fancy.
Replicate:
1. Create a new event that starts at 8am.
2. Switch the view to 'Show Full Day'
3. Using the start time resize handle and drag it up, to start earlier. And you will notice the dragItem actually drags down, and when you release the handle, the event appears in the correct place
This will only happen on the first resize when switching to 'Show full day'. You can replicate it more by switching back and forth between full day and business hours.
Similar Scenarios include:
1. Placing the event to end at 8am, switching to business hours and back, then drag the end time down, the dragItem will be positioned to start at 8am, but say its 7am and you will see the rest.
2. Placing the event to overlap 8am, will yield both problems.
Again this only happens on the first resize after switching views, and I've only tested it in DayView, so it might affect WeekView as well. There appears to be no issue when events overlap the endWorkTime.
Thanks,
Grant
There is an issue with ComboBox remote virtualization. This is reproducible on https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/filtering/#toc-filtering-with-remote-data-and-virtualization
Scroll slowly till almost the end of the list. Pay attention to the name: Paula Parente
Notice that the name keeps repeating after scrolling as the scroll goes back and forth. You'll need to scroll a few times more before the scroll continues to load
other items.
When I press on a day from the past the DatePicker automatically scrolls to the next/previous year. Please check the attached video.
Is there any workaround for this issue ?
Dear Kendo,
I'm currently working on a data grid that has virtual scrolling enabled. When a user is scrolling fairly quickly, the screen will constantly flash white. See video in attachment.
I see this same behaviour in the example provided in the docs here: https://stackblitz.com/run/?file=app%2Fmain.jsx although it is slightly less noticeable.
What can we do to fix this?
Thanks in advance.
Kind regards,
Peter
Environment Details:
OS: Windows11 version 21H2 (OS build 22000.856)
Edge Browser version: 104.0.1293.47
Repro steps:
1. Open Code Pen: https://codepen.io/m1mrt/pen/VwXjEzJ page in Edge Browser.2. Run Axe dev tools3. Observe an issue that select element has an accessible name.
Actual Result:Select element does not have an accessible name.
Expected Result:
All components need an accessible name, ideally using semantic elements and attributes. In rare cases, aria-label or aria-labelled by may be needed to alter the name.
Screenshot attachment:
Test Environment:
OS: Windows_11Browser: Version 103.0.1264.71 (Official Build) (64-bit)
Prerequisite steps:
1. Go to system settings.
2. Navigate to 'Accessibility' and activate it.
3. Navigate to 'Contrast theme' and activate it.
4. Select 'Desert/Aquatic' High Contrast theme in the combo box.
Repro Steps:
1. Open given URL https://canvasjs.com/docs/charts/chart-options/axisx/viewport-minimum/ in Edge.
2. Graph page will be open.
3. Turn on High contrast theme.
4. Verify that Graphs are not adapting high contrast Aquatic and Desert modes or not.
Actual Behavior:
Graphs are not adapting high contrast Aquatic and Desert modes. They remain same as in normal mode.
Expected Behavior:
Graphs should adapt high contrast Aquatic and Desert modes as defined. All elements should adapt to respective modes properly.
Test Environment:
OS: Windows_11Screen Reader: NVDA (2021.3)
Repro Steps:
1. Open URL: SMB Scheduler (agentcalendardevone.azurewebsites.net) page in Edge Browser.
7. Observe an issue that Incorrect role 'link' is defined on button controls.
Actual Behavior:
Incorrect role 'link' is defined on button controls present on 'Calendar' popup.
Expected Behavior:
In this case, the expected role is {button}. All components need a proper role attribute, ideally with semantics. In rare cases a role attribute should be added to give full context and information to assistive technology. Learn more by reading about when to use an aria role and the html/aria role mappings.
After applying filter or page number, the table content gets changed but the screen reader didn't inform about the same.
Repro-Steps:
Actual Result:
After performing below action's, the table content gets changed but the narrator didn't announce about the content change:
User Impact:
Test Environment:
OS: Windows_11Repro Steps:
6. Observe an issue that 'Month' control on 'Calendar' popup is not accessible using keyboard.
'Click to book' and header controls are not accessible using keyboard.
1. Open URL: SMB Scheduler (agentcalendardevone.azurewebsites.net) page in Edge Browser.
2. Provide valid 'Email address' in text field and activate 'Book New Appointment'.
3. Select any 'Time Zone' in dropdown and click 'View Available appointments' button.
4. Navigate to the table content.
5. Observe the issue that the controls in the table such as ("<", ">", "Today", calendar widget, "Week", "Click to the book") does not receive keyboard focus.
Actual Behavior:
'Month' Control on 'Calendar' popup is not accessible using keyboard.
Expected Behavior:
Control(s) must be accessible to Bluetooth keyboards and other assistive technology. Common causes of this problem include a) the element does not have a proper role assigned, b) the element needs tab-index="0" attribute to be focusable, or c) the component is not registering key presses.