Title:
[Answers Community: Ask a question]: Unable to navigate and access the 'Remove' button using keyboard.

Test Environment:
Windows 11 OS version:22H2 22621.1992
Edge Version 114.0.1823.82(Official build) (64-Bit)

Repro-Steps:
1.  Open https://www.telerik.com/kendo-react-ui/components/upload/url.
2.  Navigate to 'select files..' button using arrow key and invoke it using enter key.
3.  Upload any file.
4.  Now try to navigate using tab key and access 'Remove' button using keyboard and check whether its accessible or not using keyboard.

Actual Result:
Unable to navigate and access the 'Remove' Button using keyboard.


Expected Result:
User should be able to navigate and access the 'Remove' button using keyboard.

User Impact:
User with motor impairments who rely on keyboard will not be able to access 'Remove' button if user is not able to navigate to the button using keyboard.

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.

StackBlitz example: https://stackblitz.com/edit/react-vg8pu5?file=app/main.jsx

If you have a Form <Field component={Input}> inside an <ExpansionPanel>, if you press space or enter within the input, the expansion panel also receives the key event and will expand/collapse. It seems like these key events should not bubble out of the Field component.

In the Checkbox onChange callback, event.nativeEvent.target.checked seems to be set differently depending on whether the input was toggled by mouse click or by pressing space.

After clicking on the Checkbox, event.value and event.nativeEvent.target.checked will have the same value, consistent with the Checkbox's new state.

After pressing space with the Checkbox focused, event.value and event.nativeEvent.target.checked will have different values, with event.value containing the Checkbox's new state and event.nativeEvent.target.checked containing the Checkbox's old state.

I would expect event.nativeEvent.target.checked to be set the same way regardless of whether I am toggling the Checkbox with mouse or keyboard.  Furthermore, I would expect event.value and event.nativeEvent.target.checked to always be equal to each other.

I made a code sandbox to demonstrate the bug here: https://codesandbox.io/s/kendo-react-checkbox-bug-26f7ur

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. 

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?

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

Hi

I noticed in the PDF Export component limitations (https://www.telerik.com/kendo-react-ui/components/drawing/limitations-browser-support/) that it does not support iFrames. This is a major issue for us as we have data containing full HTML markup and <style> tags, which we want to embed in a PDF. We need to use an iFrame otherwise the styles will bleed into the rest of the document. Is there any plans to support iFrames in the future?

Steps:

1. Create web component with shadow-root.

2. Attach all.css styles behide shadow root.

3. Add compoent with icon from WebComponentIcon font.

Result:

Icon are not displayed properly.

UPDATE: This is live code I prepared for you: https://stackblitz.com/edit/react-ts-dhhsaz?file=index.tsx

I get error:

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

But error appears to be inside KendoDrawer component. I can't figure out what is wrong. This is my component:

import React, { useState } from 'react';
import { withRouter, useLocation, useHistory } from 'react-router-dom';

import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { Button } from '@progress/kendo-react-buttons';



export const SidebarDrawer = (props:any) => {

    const items = [
        { text: 'Povezivanje', icon: 'k-i-inbox', selected: true, route: '/povezivanje' },
        { separator: true },
        { text: 'Notifications', icon: 'k-i-bell', route: '/notifications' },
        { text: 'Calendar', icon: 'k-i-calendar', route: '/calendar' },
        { separator: true },
        { text: 'Attachments', icon: 'k-i-hyperlink-email', route: '/attachments' },
        { text: 'Favourites', icon: 'k-i-star-outline', route: '/favourites' }
    ];

    const [expanded, setExpanded] = React.useState(true);
    const [position, setPosition] = React.useState(true);
    const [selectedId, setSelectedId] = React.useState(items.findIndex(x => x.selected === true));

    let positionMode = position ? 'start' : 'end';

    const handleSelect = (ev:any) => {
        setSelectedId(ev.itemIndex);
        setExpanded(false);
    };

    const handleClick = () => { setExpanded(prevState => !prevState); };

    const handleChange = () => { setPosition(prevState => !prevState); };

    const drawerProps = {
        expanded: expanded,
        position: positionMode,
        mode: 'push',
        items: items.map(
            (item, index) => ({ ...item, selected: index === selectedId })),

        onSelect: handleSelect,
    }

    return (
        <Drawer {...drawerProps}>
            <DrawerContent>
                {props.children}
            </DrawerContent>
        </Drawer >
    );

};

export default withRouter(SidebarDrawer);

And this is how I use it inside App component:

import React, { useState } from 'react';
import { hot } from 'react-hot-loader';
import { Button } from '@progress/kendo-react-buttons'
import { Grid, GridColumn, GridDetailRow, GridToolbar } from '@progress/kendo-react-grid';
import '@progress/kendo-theme-bootstrap/dist/all.css';

import 'bootstrap/dist/css/bootstrap.min.css';
import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import urlConstants from 'ClientApp/constants/urlConstants'
import { Connecting } from '../containers/connecting/Connecting';
import SidebarDrawer from 'ClientApp/components/SidebarDrawer/SidebarDrawer';

export const App: React.FC = () => {


    return (
        <React.Fragment>
            <Router>
                <SidebarDrawer>
                    <Switch>
                        <Route exact={true} path="/" component={Connecting} />

                    </Switch>
                </SidebarDrawer>
            </Router>
        </React.Fragment>
            )
}

export default hot(module)(App);