Select control with filtering option triggers iOS keyboard when launched

Select pickers & dropdowns
1

How can I stop the select control (with the filter option) from triggering the iOS keyboard when it displays. On Android it just displays the select options and only triggers the keyboard when the user clicks on the filter input to enter a filter value.

Triggering the iOS keyboard creates confusion for the end user. See attached video for example of problem:

https://drive.google.com/file/d/1TOzK_mBywhJzk6cPrV05QEAnVO4wjUmF/view?usp=sharing

2

Hi @Michael_DeMutis :wave:

I was not able to reproduce this behavior on iOS.
Can you please try with this demo: https://demo.mobiscroll.com/jquery/select/autocomplete?
Is the issue still persist?
Can you share a bit more information about where does this issue occur?

3

I’m doing this inside of an Apache Cordova compiled app using the latest iOS WebView. I’m not sure if that has something to do with it.

I did try the test you gave me and it does pop up.

If you want to try on my app you can install it from the Apple AppStore and try it. I can pm you our demo account login credentials. The app is called “Oil Analysis” published by myself, Michael DeMutis, WearCheck Canada Inc.

So maybe I should try removing focus either onMarkupReady or onShow

I did notice just now that even in my Ripple Emulator (emulates the Cordova environment through a Chrome extension) when I launch the select the focus is set to the Filter input. The cursor is there blinking. I’m gonna try setting breakpoints in the JavaScript debugger and see if I can find out where that focus happens.

5

OK so I kind of figured something out.

In my cordova app’s config.xml I have the iOS setting:

KeyboardDisplayRequiresUserAction (boolean, defaults to true) - set to false to open the keyboard when form elements get focus via the JavaScript focus() call.

So for most app’s you wouldn’t see the keyboard launch unless this setting was changed to false. The problem I have is that I need this setting to allow the keyboard to come up because in another part of my app I am using my input box mod to display a mobiscroll.popup from the top displaying the input box and then triggering the focus to the input box so the user can edit the field. (I mentioned this in another post). So the only real issue now is whether you guys can stop the focus from going to the filter element when the mobiscroll.select launches. Can you check your code to see if you have anything set to make that focus happen?

6

OK so I went through your mobiscroll.min.js and took out all the .focus() - I just replaced them with toUpperCase() for now to see if it would work and if it would not set focus to the filter field and it worked. So at some point you guys are setting focus to that field. Can you make this an option or something or remove that focus as I’m not sure why you would need to do that?

Here is a video showing it working
https://drive.google.com/file/d/1Ourx-4UXrnuPaKk3OYTxznmkGAoBYmd0/view?usp=sharing

7

Here is the section of code that puts focus on the input box from mobiscroll.min.js

    function c(e) {
        e || Ct || !ee._activeElm || (se = new Date,
        ee._activeElm.focus())
    }

When de-minified in Chrome’s source view it is on line 1362. Consider removing this or making it an option. Until then I will just change it to something else for now. I was using .toUpperCase but maybe I’ll just make it a .removeClass(“none”) to be safe.

8

Hi Michael,

Many users expected to focus automatically in the filter input when the picker is shown, so they can type right away. So we added this built in. However this does not bring up the keyboard inside iOS Safari because they have some restrictions opening the keyboard programatically. Apparently this is not the case inside iOS webview, so there the keyboard appears.

Currently we don’t have dedicated option to disable this behavior, but you can still do it without modifying the source code, by using the onShow event (mbsc-fr-focus being the default focus element, this is the one getting the focus when any of the modal picker’s are shown, so on desktop the Tab key will move the focus to the first available control inside the modal):

$('#demo-autocomplete').mobiscroll().select({
  display: 'center',
  data: names,
  filter: true,
  placeholder: 'Please select',
  onShow: function (ev, inst) {
    inst._activeElm = $('.mbsc-fr-focus', ev.target)[0];
  }
});

We will think about making this configurable from setting.

Best,
Isti

9

Thank you Isti. This did work. I don’t care if you make it a configurable option or not so long as I have a solution to stop it from triggering the keyboard. This worked fine for me and I’m happy I don’t have to continue to modify the source code as that could be tedious to maintain after each update!

Keep up the great work. I am really happy with MobiScroll. I use it throughout my app and it really has taken my app to the next level in terms of ease of use for my customers. I’m in the Industrial sector so there is competition out there but we are dominating thanks in part to MobiScroll! :slight_smile:

10

Hi,
I see that the post is pretty old, but I have exactly the same problem with my Ionic 6 App (Angular).
Can you please help me to convert the solution to angular and current version of the library?
As I see " mbsc-fr-focus" is not exist anymore…