PDA

View Full Version : [OPEN] Remove tabIndex in Button disable causes selection bug in Chrome



Werzi2001
24 Apr 2015, 12:46 PM
Ext version tested:


Ext 4.2.3


Browser versions tested against:


Chrome 41


DOCTYPE tested against:


Seems not to be relevant


Description:


Use following example Code

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-gray.css"/>

<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/locale/ext-lang-de.js"></script>
</head>
<body>
<iframe id="frame" src="frame.html" width="500" height="200"></iframe>

<script type="text/javascript">
Ext.create('Ext.button.Button', {
renderTo: document.body,
text: 'Click me',
listeners: {
click: function(btn, e, eOpts) {
var frame = document.getElementById('frame');

// !!causes bug!!
btn.disable();

// get selection
var selection = frame.contentWindow.getSelection();

// create new range
var newRange = frame.contentDocument.createRange();
newRange.setStart(frame.contentDocument.body.childNodes[0], 0);
newRange.setEnd(frame.contentDocument.body.childNodes[0], 0);

// set new range
selection.removeAllRanges();
selection.addRange(newRange);

// focus iframe
frame.contentWindow.focus();
}
}
});
</script>
</body>
</html>

frame.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body contentEditable="true">Edit me</body>
</html>

Steps to reproduce the problem:


Click in editable iframe
Write some text
Click on button


The result that was expected:


Cursor should be set to start of editable iframe (continue typing directly)
This is possible if "button.disable()" is removed from the code (or using a different browser)


The result that occurs instead:


Cursor is not set to start of editable iframe (you cannot continue typing directly)

Debugging done


The bug seems to be caused by the following part of Button.disable

me.el.dom.removeAttribute('tabIndex');
The removal of the tabIndex attribute seems to interrupt the selection handling of Chrome
Replacing the removal of the attribute by setting the attribute to "-1" seems to fix the bug

me.el.dom.setAttribute('tabIndex', -1);

Gary Schlosberg
24 Apr 2015, 3:51 PM
Thanks for the report! I have opened a bug in our bug tracker.