Completed
Last Updated: 16 Jun 2021 11:22 by ADMIN
Alexander
Created on: 04 Feb 2021 20:27
Category: KendoReact
Type: Bug Report
0
DatePicker and DateInput React components malfunction when rendered inside iFrame

if (_this.element && document.activeElement === _this.element) {
                _this.element.setSelectionRange(selection.start, selection.end);
            }

@progress/kendo-react-dateinputs": "^4.3.0"

DatePicker and DateInput React components malfunction when rendered inside iFrame.

 

For example, key navigation between date parts is not working for the DateInput/DatePicker rendered inside iFrame.

When user clicks on the month part of the date, the month part does not get selected.

Same for day or year part.

 

The reason is a code similar to this in DateInput.js:

 

if (_this.element && document.activeElement === _this.element) {
                _this.element.setSelectionRange(selection.start, selection.end);
            }


if (document.activeElement !== _this.element) 

This code references the top level "document".

If the React component is rendered inside iFrame, we need to use the contentDocument of the iFrame to have this code working as expected.

 

Could replace "document" with "_this.element.ownerDocument" to make it work inside iFrame as well as in the top level window.

 

Now "document.activeElement" always returns the reference to the iFrame element rather than the expected date input element inside iFrame.

 

 

 

1 comment
ADMIN
Stefan
Posted on: 05 Feb 2021 13:53

Hello, Alexander,

Thank you for reporting this.

We will investigate this case and plan it accordingly.

Additionally, I have added some Telerik points to your account for bringing this to our attention.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.