How to enable text selection for Container/Component?

[WEBcast]

Hi,

I need to enable, for a container, text selection in Sencha Touch 2.

I was trying to add the style "-webkit-user-select: text; -webkit-touch-callout: default;" but didn't work.

I'm suspecting the tap event is blocked or something like that...

I don't want to use a input text because is popping up the keyboard.

Anyone has any idea how can I be able to tap in a container and to select the text?

Thanks.

[mitchellsimoens]

Sencha Touch doesn't support text selection currently. This is due to some events being captured also in a scrollable container text selection would not give a good user experience.

[WEBcast]

mitchellsimoens, I'm agree with you, in a scrollable container text... but having the option to disable scrolling I'm sure there is a way to bubble/propagate the tap event and to enable text selection.

If in the current framework there is no option to enable the text selection it should be implemented because some times user needs are different from original design and you should not constrain the user.

What I want to know is what function I should overwrite to propagate the tap event for selection

On Ext.viewport.Default I was trying to configure isInputRegex with a custom html tag "selectable" but this trick didn't work.

isInputRegex: /^(input|textarea|select|a|selectable)$/i,

and to have a container with

html: "<selectable style='-webkit-user-select: text; -webkit-touch-callout: default;'>Let me select this on tap</selectable>"

I'm sure there are ways to do it and at the end I will enable this but I want to do It as clean is possible, with less possible hacks into framework.

Thanks.

[Surinder singh]

Thanks WEBcast, you have given me a direction, and here it is how it works for me

add the css, then add the "userSelectable" class on element/div/component

.userSelectable *{-webkit-user-select:text !important;}

then add this override before building the application

Ext.override(Ext.viewport.Default, {
    doPreventZooming: function(e) {
        // Don't prevent right mouse event
        if ('button' in e && e.button !== 0) {
            return;
        }


        var target = e.target;
        //_dir(window.getComputedStyle(target, null).webkitUserSelect)
        var webkitUserSelect = window.getComputedStyle(target, null).webkitUserSelect;
        if (target && target.nodeType === 1 && !this.isInputRegex.test(target.tagName) && webkitUserSelect=='none') {
            e.preventDefault();
        }
    }         
});

very soon you will see a working sample on our site (on Sencha Theme builder ) , where we are showing our extensions with sample code.

[gypsie]

MUCH appreciated. Worked like charm. And absolutely agree with you that this should be built-in option within Sencha Touch. There should be config for textfield called selectable: true,.

thanks for posting!