Results 1 to 2 of 2

Thread: Remove tabIndex in Button disable causes selection bug in Chrome

    You found a bug! We've classified it as EXTJS-17528 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium User
    Join Date
    Dec 2009

    Default Remove tabIndex in Button disable causes selection bug in Chrome

    Ext version tested:

    • Ext 4.2.3

    Browser versions tested against:

    • Chrome 41

    DOCTYPE tested against:

    • Seems not to be relevant


    • Use following example Code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
            <!-- 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>
            <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!!
                            // 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
                            // focus iframe
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
        <body contentEditable="true">Edit me</body>
    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
    • 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);

  2. #2
    Sencha User
    Join Date
    Feb 2013


    Thanks for the report! I have opened a bug in our bug tracker.

Similar Threads

  1. Replies: 7
    Last Post: 31 Aug 2015, 8:36 AM
  2. Replies: 2
    Last Post: 10 Apr 2015, 1:08 AM
  3. Replies: 5
    Last Post: 3 Jul 2013, 4:53 AM
  4. Replies: 2
    Last Post: 5 Dec 2010, 11:11 PM
  5. [Grid] disable a row issue in Chrome
    By foronoob in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 19 Jan 2009, 5:30 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts