modelview close tap event passed to underlying widget

2 posts, 1 answers
  1. fang
    fang avatar
    15 posts
    Member since:
    Apr 2013

    Posted 26 Jul 2013 Link to this post

    kendoui mobile version 2013.2.716, test on ipad mini with package with phonegap 2.9.0

    (1)  listview 
    <ul data-role="listview" data-type="group" id="itemListView" data-click="listViewClick" data-style="inset">
        <li><label class="km-listview-label"><textarea id=${idval} onfocus="clearArea(this);" style="width:100%;height: 100px;" maxlength="150">input answer</textarea></label></li>
        <li><label class="km-listview-label"><textarea id=${idval} onfocus="clearArea(this);" style="width:100%;height: 100px;" maxlength="150">input answer</textarea></label></li>
        <li><label class="km-listview-label"><textarea id=${idval} onfocus="clearArea(this);" style="width:100%;height: 100px;" maxlength="150">input answer</textarea></label></li>
       <li><label class="km-listview-label"><textarea id=${idval} onfocus="clearArea(this);" style="width:100%;height: 100px;" maxlength="150">input answer</textarea></label></li>
       <li><label class="km-listview-label"><textarea id=${idval} onfocus="clearArea(this);" style="width:100%;height: 100px;" maxlength="150">input answer</textarea></label></li>
       <li><label class="km-listview-label"><textarea id=${idval} onfocus="clearArea(this);" style="width:100%;height: 100px;" maxlength="150">input answer</textarea></label></li>
    </ul>
    (2) modelview
    <div data-role="modalview" id="submitDialog" style="width: 40%; height: 13em;">
        <div data-role="header" class="navbarStyle">
            <div data-role="navbar"><h3>info</h3></div>
        </div>
        <div style="margin:.5em auto; text-align: center;font-size: 1.6em;" id="subcontent">submit ok</div>
        <div style="margin:0 auto; text-align: center;font-size: 1.3em; padding-top:0.5em;">
            <a data-click="closeSubmitDialog" type="button" data-role="button"
               style="width:8em;background-color:#06b375;color:#ffffff;">Enter</a>
        </div>
    </div>
    (3) javascript

    function openSubmitDailog(msg){
        if(MYAPP.dialogOPEN==false){
            MYAPP.dialogOPEN=true;
            var modalView=$("#submitDialog").data("kendoMobileModalView");
            modalView.open();
            if(msg)
                $("#subcontent").html(msg);
        }
    }
     
    function closeSubmitDialog(){
        //setTimeout(function(){
            var modalView=$("#submitDialog").data("kendoMobileModalView");
            modalView.close();
            MYAPP.dialogOPEN=false;
            if(MYAPP.status==8){
                init();
            }
            else if(MYAPP.status==4){
                MYAPP.app.navigate("#loginpage");
            }
            //return;
        //},100);
     
    }
    process :
    openSubmitDailog ----->  modelview popup in midled of  view ------> press "Enter" in modelview  -------->   closeSubmitDialog  ---------->  modelview  close 
    ----------->   the underlying widget in listview can receive tap event   when close modelview  


    for example ,  when close modelview ,  textarea in listview can receive tap event ,so keyboard will be shown up!  I think this a bug in new version 

     
  2. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 30 Jul 2013 Link to this post

    Hello,

    The behavior you observe is by design - the mobile widgets tap/click events are fired on the touchend DOM event, while the textareas are focused on the click event, fired 300ms later (by the way, if I am correct, this happens only in Android). 

    If this is a problem for your case, You may work around this by using the click DOM event instead.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top