[CLOSED] Editable Plugin doesn't work with Chrome

[anup]

Hi,

I noticed that the Editable Plugin does not work in Chrome:

https://examples1.ext.net/#/GridPane.../EditableGrid/

If you try to focus into the any field with Chrome, the text box never gets focus so you can't type into it.

One thing I noticed which was strange is that the ids for each text field is NOT unique, even though looking at the plugin code it does use Ext.id(). This doesn't affect Firefox and IE, however. I am guessing this is relevant, depending on how Ext JS internally is focusing on these fields - in my real code I was trying to use Ext.Element's focus() method to manually focus on such fields but it was failing because it was getting the other component that had the same id and trying to focus that!

In the examples explorer the component that has the same id as various other components on the page - however, technically I think the other components are outside of the iframe that the example itself is in. Maybe that is a Chrome bug?

I can't see how to work around this. Other than maybe to modify the original EditorGrid plugin to change the way it generates the id somehow? Maybe prefix it with the id of the containing grid panel?

I believe the area of code that is relevant is this bit?

ed = ed.field.cloneConfig({
    id: Ext.id(),
    value: rec.get(di),
    grid:{
        grid   : grid,
        record : rec,
        cell   : cell,
        dataIndex : di,
        col : col,
        row : row
    },
    width    : w[col],
    renderTo : cell,
    ctCls    : 'x-small-editor x-grid-editor ux-editable-grid'
});

Unfortunately it is deep inside the "renderEditors" JavaScript function, so overriding this is going to be a maintenance problem.

Lastly, I was looking in Ext.NET 2 for the equivalent example, but don't see it there? Did I miss it, or is it not supported in Ext.NET 2?

Thanks!

[Daniil]

Hi Anup,

I can reproduce the issue, but I don't see that the ids are not unique. I see the ids on the input elements. Please clarify what ids are you looking at?

Lastly, I was looking in Ext.NET 2 for the equivalent example, but don't see it there? Did I miss it, or is it not supported in Ext.NET 2?

A breaking change item #102:
https://examples2.ext.net/#/Getting_...AKING_CHANGES/

102. The EditableGrid plugin has been removed. Use the ComponentColumn.
https://examples2.ext.net/#/GridPanel/ComponentColumn/Editor/

[anup]

Hi Anup,

I can reproduce the issue, but I don't see that the ids are not unique. I see the ids on the input elements. Please clarify what ids are you looking at?

In chrome, if I inspect the input field, then use ctrl-f to find the same id in the rest of the page (this is the dynamic/live view of the HTML not the page source). Then you see it in multiple places. I've attached a screenshot to try and demonstrate.

Let me know if you need more info.

A breaking change item #102:
https://examples2.ext.net/#/Getting_...AKING_CHANGES/

Ok. Thanks.

[Daniil]

Clear, thanks. Yes, there is no a requirement to have unique ids across a parent page and its iframes. It definitely doesn't cause that behavior.

We are investigating the issue.

[anup]

Sorry, just further info if it helps: yes, ids as defined by HTML must be unique. But this aspect may be a red-herring.

In the browser console when I was doing the search (and the screenshot) I was of course searching for the id using the find feature and it would of course find it in the document and the iframe. But when you are in the correct context (e.g. doing document.getElementById) then of course it will only return the one div - if you are in the examples explorer page it will return the div. If you the iframe is opened as its own browser page, then it will of course just find the input.

So why in chrome the input field is not getting focus, is still an issue, but not related to the ids - sorry for any confusion or time wasted.

[Vladimir]

Hi

To fix the focus please use the following css rule

<style>
        .x-unselectable.ux-editable-grid, .x-unselectable.ux-editable-grid * {
            user-select: text;
            -o-user-select: text;
            -ms-user-select: text;
            -moz-user-select: text;
            -webkit-user-select: text;
            cursor: default;
        }
    </style>

[anup]

Awesome. That works. Many thanks for that.

Couple of notes. I changed the order of the CSS so that the non-prefixed user-select is last (some browsers support both prefixed and unprefixed versions - for backwards compatibility but in some rare cases the implementation may be different, so to be sure the standard one wins, we place it last - neat explanation here: http://css-tricks.com/ordering-css3-properties/)

So the CSS is something like this:

-moz-user-select: text;
-ms-user-select: text;
-webkit-user-select: text;
user-select: text;

Also it seems opera prefix is no longer needed as they are using webkit now (unless you want to support older versions - but I think they are good with auto-updates, and most of their user base seems to be. In any case, with latest Opera I found the above was sufficient.)

Anyway, many thanks for this...!

[Daniil]

Thank you for the tweak!

Finally, we committed the fix to SVN (branches/1) and fixed the online example.