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.