Curser in search modal

[wowflak]

I have built this modal with a custom search bar in it and all is good, but I want the curser to populate in the search as it opens to avoid a second click.

Thanks

Search bar on left

http://concordportal.staging.wpengine.com/songwriters/

[christian]

Hey @wowflak,

Try adding this code to your Header JS.

jQuery( ".e2063-19" ).click(function() {
 setTimeout(function() {
  jQuery( "input.orig" ).focus();
 }, 1000);
});

That code is only unique to your currently setup. If you change something in the header, it might not work because e2063-19 is a dynamic class of your modal. You might want to change it into your class.

Hope that helps.

[wowflak]

Thanks! That did the trick.

[wowflak]

Hi again,
I did add this for mobile:
jQuery( “.e2063-21” ).click(function() {
setTimeout(function() {
jQuery( “input.orig” ).focus();
}, 1000);
});

It works on inspect but on actual phone it does not work…

Any ideas?
Thanks

[ruenel]

Hey There,

Thanks for getting back to us. That will not work in mobile device because there is no click events in touch devices. Please update the JS code and use this instead:

jQuery( ".e2063-19" ).on('click touchstart', (function() {
 setTimeout(function() {
  jQuery( "input.orig" ).focus();
 }, 1000);
});

Hope this helps. Kindly let us know.

[wowflak]

Hi,
That did not work. I added the code and it stops working on desktop. Also the Search is in a different place in the header on mobile. I think it is e2063-21. So I tried doing this to accomplish both desktop and mobile:

jQuery( “.e2063-19” ).click(function() {
setTimeout(function() {
jQuery( “input.orig” ).focus();
}, 1000);
});

jQuery( “.e2063-21” ).on(‘click touchstart’, (function() {
setTimeout(function() {
jQuery( “input.orig” ).focus();
}, 1000);
});

and that prevents either from working.

Any ideas?

Thanks

[ruenel]

Hello There,

Sorry there was a typographical error in the code. Please use this instead:

jQuery( ".e2063-19, .e2063-21" ).on('click touchstart', function() {
 setTimeout(function() {
  jQuery( "input.orig" ).focus();
 }, 1000);
});

Hope this helps. Kindly let us know.

[wowflak]

Thanks, the desktop works again but still no luck on the phone or ipad.

[rad]

Hi there,

Please try changing that code to this,

jQuery( function($) {

var elements = $( ".e2063-19, .e2063-21" );

$ ( document ).ready ( function() {
setTimeout ( function() {  elements.off('touchstart touchend'); } , 750 );
} );

elements.on('click', function() {
 setTimeout(function() {
  $( "input.orig" ).focus();
 }, 1000);
});

} );

Thanks!

[wowflak]

Thank you, but same results. Desktop works but not mobile.

[christopher]

Hi there,

Please try this one:

jQuery( ".e2063-19, .e2063-21" ).on('click', function() {
    var that = jQuery(this);
 setTimeout(function() {
  jQuery( "input.orig" ).focus();
  that.trigger('touchstart');
 }, 1000);
});

jQuery('.e2063-21').on('touchstart', function() {
    jQuery(this).focus();
  });

I did not have a way to check the case on mobile unless the code was actually added to the theme. So if it is not working please get back to us with the URL/User/Pass of your dashboard using a Secure Note to be able to test the case ourselves.

The problem is that the focus function of the jQuery does not trigger the mobile keyboard unless it is triggered by the TouchStart event. You can learn more about the problem here.

Thank you.

[wowflak]

Okay, still not working. I am attaching a secure note. Thanks!

[jumar]

Hello there,

It wasn’t working since there was a duplicate code in your Global JS.

We suggest you add a class to your modals for specificity purposes. E.g. my-search-modal-01

Then update your code to:

jQuery(".my-search-modal-01, .my-search-modal-02").on('click', function() {
    var that = jQuery(this);
    setTimeout(function() {
        jQuery("input.orig").focus();
        that.trigger('touchstart');
    }, 1000);
});

jQuery('.my-search-modal-02').on('touchstart', function() {
    jQuery(this).focus();
}); 

Hope that helps.

[wowflak]

Thanks, I have made these changes but am still having issue on mobile.

This is for iphones, and ipads.

I appreciate all your efforts.

[jumar]

Hello there,

It seems that it was really an iOS8 bug. Furthermore, let us try for the last time with the following solution provided on the link below.

in iOS8 using .focus() will show virtual keyboard and scroll page after touch

Kindly replace your JS code to:

jQuery(document).ready(function() {
    jQuery(".my-search-modal-01, .my-search-modal-02").on('click', function() {
        var that = jQuery(this);
        setTimeout(function() {
            jQuery("input.orig").focus();
            that.trigger('touchstart');
        }, 1000);
    });

    jQuery('.my-search-modal-02').on('touchstart', function() {
        if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
            jQuery(this).focus();
        }
    });
});

Hope that helps.

[wowflak]

Thanks, still no change.

[christian]

Hey @wowflak,

I tried this on my Android phone and this still does not work. Maybe there is a way out there that will achieve what you need but as you can see the back and forth testing in this thread, we haven’t come up with a working solution and this is getting into custom development which is outside the scope of our support. Maybe further research is needed. What I can do now is add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Thank you for understanding.