Input issues on select fields

[d-fnc]

Hello there!

Thank you for this awesome plugin!

A problem i'm facing with this plugin, is that ever since i installed it, our webview's input elements don't work anymore on the phone. You can choose from the dropdown list iPhone style, but your selection will not be saved. Is there a workaround for this problem? Our project is a Cordova based project in webview. Everthing is up to date, and the application is running on ios 11 @update: I figured that the selection you make is applied to the next element you click. So if there are 2 inputs and you select option #2, then click on the other input field it's selection will go to #2.

[divyanshverma]

+1

[Defcon0]

Also facing this. See attached video for visual hints. Even on an unstyled select the issue exists. In UIWebView, the issue doesn't exist.
ScreenRecording_11-14-2017 23-23.zip

[Defcon0]

Any progress on that :-(??

[d-fnc]

Our only option was to revert back to UIWebView, which obviously introduced it's own problems.

[jfernandezgersol]

+1

[Defcon0]

@d-fnc So did we. Now we have issues with landscape mode and select fields on ipad. Very sad situation :-( For ionic this doesn't seem to have any priority.

[jfernandezgersol]

I have discovered something more: if you activate the accesory bar to show the "Done" button, clicking on it will perform the change in the select tag. If we could find a way to activate this "Done" button only in case of a dropdown list, we could have at least one temporal functional solution (clicking outside the dropdown list won't work anyway).

[d-fnc]

Hey everyone!

If you're still struggling with this issue, we found a workaround for the problem by absolute chance. We had some irreconcilable issues with UIWebView recently and had to switch to WK to give it another go. Strangely enough we didn't experience this bug anymore, and thought that it was fixed. But actually there was a UIWebView bug, that we had a workaround for that solves this issue as well, in WKWebView.

Try adding preventDefault on your select's mouseup and touchend event like so:

$('.w-select').on('mouseup', function(e){
e.preventDefault();
});
$('.w-select').on('touchend', function(e){
e.preventDefault();
});

You will still need the AccessoryBar to be able to save changes to the selection, but at least it won't mess up the values anymore when you change between the input fields.

Cheers!

[Defcon0]

@d-fnc Did the fix work well in the past months? I want to give wkwebview another try as well since https://github.com/ionic-team/ionic-plugin-keyboard now is deprecated and doesn't work with cordova-android >= 7.0.0 anymore, but the successor plugin https://github.com/ionic-team/cordova-plugin-ionic-keyboard needs wkwebview.

Not a very good idea to totally count on wkwebview when there are bugs that significant in there, ionic team!!

[d-fnc]

@Defcon0 It holds up well so far, we didn't experience any issues with the inputs field since then. I would say give it a go and see how well it works out for you.

[Defcon0]

@d-fnc Sounds great, thanks for the reply. I'll give it a try in some days.

[jcesarmobile]

The problem is the keyboard plugin hides the form accessory view by default and that is needed in select fields.

You can prevent that behaviour by adding this preference in the config.xml
<preference name="HideKeyboardFormAccessoryBar" value="false" />

or on runtime with Keyboard.hideFormAccessoryBar(false);

[phiferd]

@jcesarmobile -- as far as I can tell this issue is not resolved. Even if you add the preference so the "Done" button appears, if the user clicks outside of the select popup, their selection is ignored. Is that the intended behavior? It seems counter-intuitive to me, and is not how select fields work in Safari/Chrome on iOS.

[jcesarmobile]

select is an html element, so if it doesn't work as you expect, report it to Apple, the plugin doesn't do anything other than hiding the done button if you have that preference set to true, but doesn't affect the select behaviour in any way.