Develop Reference

How to catch the key values from a custom keyboard on Android mobiles or tablets? How to make work an Android Keyboard & Barcode Scanner within Odoo?

I am trying to use Odoo with the application Barcode & QR code Keyboard, from Nikola Antonov (just an example, I do not know if there are better options), in order to read barcodes for the pickings.
The first problem I had to face was I had to show the keyboard in this picking view
So I needed to create an input field in order to click in it and show the Android Keyboard, or in this case the Nikola Antonov keyboard. Then, I had to assign the function handler to this input text field:
this.$('#input_text_barcodes').on('keyup', self.getParent().barcode_scanner.handler);
The function is only working as expected if I use the normal Android Keyboard (AOSP) and only with numbers. The letters of the Android Keyboard or whatever character of the Nikola Antonov Keyboard are not working (only the backspace)
this.handler = function(e){
self.$('#aux_label').text('>> CODE: ' + e.which)
self.$('#aux_label').text('>> KEY CODE: ' + e.keyCode)
self.$('#aux_label').text('>> KEY: ' + e.key)
// [...]
I tried switching the languages of the keyboard as well, but with the same result
Should I change the keyup event?
Is there other way to catch the characters?

Finally I have asked to the developer of the application directly and he solved the problem quite fast. He made it work with numeric keys, that is enough for what I wanted to achieve.

Cordova backspace cannot remove image in contenteditable div

I'm using Cordova 3.6.4 in Visual Studio 2013 Community Update 4 to build an apps with a "chat" functionality, the main reason that I use this technology is because I want to, hopefully, write once and can use it in all platforms such as Android phones, iPhones, all mobile phone browsers, all desktop browsers.
In order to let the users inputting the "message" to be sent, I create a [div] which is contenteditable="true" at the bottom left of the html, at the right hand side of this [div], I have two [image buttons], one is the [happy face] button, the other is the [send button]. (You know, just like Whatsapp, Line and WeChat!)
At any time the user can click the [happy face] button to select one of the many "face image" to insert into the cursor at the [div], then I'll add the html codes into the [div], e.g. div.innerHTML += '< img src="1.jpg">'
So, the innerHTML of this [div] can contain characters AND images, e.g.
12< img src="1.jpg" />34< img src="2.jpg" />
Of course, the actual display is:
12[1st Picture]34[2nd Picture]
If the cursor is at the end of this [div], and I clicked the [BACKSPACE], I expect the [2nd Picture] will be removed, if I clicked the [BACKSPACE] again, I expect the letter [4] will be removed from the [div], this is work at ALMOST every platform I mentioned including all mobile browsers in android and iphone/ipad, all desktop browsers. But it does not work when I build an Android app and run it in any Android phone.
Running it as a WebView in android phone, when I click the the [BACKSPACE], the letter [4] is removed instead of the [2nd Picture], when I click the [BACKSPACE] again, the letter[3] is removed. I can NEVER remove the 2 images no matter which IME I'm using.
To work around, I tried to add a keyup/keydown/keypress listener to the [BACKSPACE] but it never fires.
At last, to work around this [BUG], I need to add a third [X] image button and use JavaScript string.replace to remove the < img> tag when users click this [X] button, but it looks very stupid to the users!
It makes me crazy that ALL IMEs do not remove the image for me by pressing the [BACKSPACE], and if the key events are not fired, I cannot remove the images myself!
I tried ALMOST, I think, ALL the suggestions provided by stackoverflow but they don't work at all, either not applicable to CORDOVA, or with compilation error such as [command failed with exit code 8] in Visual Studio.
What should I do?

Android Knockout Select Problems - Chrome and Native Browser

I'm having separate but related issues relating to dropdown events in both the native and chrome browser on an android device (Samsung Galaxy Tab4).
Chrome - when selecting an item in a dropdown, the change event is fired EVERY time but the UI value doesn't update until focus is changed
Native Browser - The first time a select is changed, everything works fine. All subsequent interactions with select is as follows
--- First time an option is selected, change event DOES NOT fire and value does not update on UI
--- Second time an option is selected, change event does fire, value updates on UI
I'm using knockout with Ajax calls to fill the dropdown list. Here's the template code html (on change event here is just an alert for testing change event):
<div class="col-xs-5 col-sm-5 col-md-2 col-lg-2 search-form-label" data-bind="visibleFade: advancedSearch">
Proceeding Type
</div>
<div class="col-xs-7 col-sm-7 col-md-4 col-lg-4 search-form-data" data-bind="visibleFade: advancedSearch">
<select class="select-12" data-bind="disabled: !proceedingTypeCodes.loaded(), event: {change: onSelectChange}, value: ProceedingType, options: proceedingTypeCodes, optionsText: 'Name', optionsValue: 'Code', optionsCaption: '-- ALL --'"></select>
</div>
The view model is actually built up based on a model brought back from an Ajax call (using the json, it creates the model and binds to self. Values are brought back based on ajax requests, added to select list and loaded is marked as true. This is all called on page load
_dataService.getRemoteSiteData("Case/GetCaseStatusCodes?isForSomething=false", null, _loadCaseStatusCodes);
var _loadProceedingTypeCodes = function (data) {
_viewModel.buildModel({ proceedingTypeCodes: data }, _self);
_self.proceedingTypeCodes.loaded(true);
};
It's worth mentioning that all of this works for all other browsers, devices and platforms. We even have another site that uses this exact same paradigm for building select lists which works great (although there is only one select list on that search page whereas there are multiple ones on this page).
Anyone run into this problem?

I believe this problem is unique to Android's native browser and even when I stripped away knockout, bootstrap, etc, there was still some inconsistency.
What seems to be working is using jquery 'on' and $(this).focus methods to guarantee what you click on is in focus
$('.container').on('click','select',function(){
$(this).focus();
});
I used on as this call is in my _layout page so these inputs won't be on the page when it loads (generally) but it can really go anywhere. Very annoying bug but I think this is a decent workaround.
Related to the chrome issue, this was fixed in Chrome 40.* release

How to select any option of select tag using android web driver

I am writing test cases for a website for android device. In which I need to select an option from the drop down list of the page. But it seems that android web driver does not provide any solution regarding it.
I tried the Select API but it is not working.
Code snippet
Select loginType = new Select(this.driver.findElement(By.xpath(LOGIN_TYPE_CHOICE)));
loginType.selectByValue("smartphone");
driver.findElement(By.id(LOGIN_BUTTON)).click();
Looking for some workaround.

I'm using c# to run selenium tests against android, firefox Chrome and IE and I enounterd the same problem with the android driver.
This worked for me : (it should work in java if you refactor the code according to the Java conventions)
string jsToBeExecuted="document.getElementById('<insert dropdown Id here>').selectedIndex=<insert index here>";
IJavaScriptExecutor jsExecutor = (IJavaScriptExecutor)this.Driver;
jsExecutor.ExecuteScript(jsToBeExecuted);
Note that no changes will be rendered on screen ! ! !
Upon submitting the element with the selected index will be used.
It is up to you if you want to add some tweaks to it to select the elements by text or whatever you like.

I have the following assumption from my expirience of automation web applications with selenium.
as I know selenium is uncapable of interacting direcrly with dropdown options as they considered to be invisible (inactive).
The way it always works - is to use js for this.
First of all locate element properly with css selector properly and verify it with firepath (addon to firebug in ffox)
So you got css sselector:
String css=....;
public void jsClickByCss(String cssLocator){
JavascriptExecutor js = (JavascriptExecutor) driver;
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("var x = $(\'"+cssLocator+"\');");
stringBuilder.append("x.click();");
js.executeScript(stringBuilder.toString());
}
jsClickByCss(css);
You can also try another approach using Builder, advanced user interactions API:
The idea is quite simple. First of all you should make dropdown roll down so element you want to click on become visible , wait with driver.manage.timeout and then select needed dropdown element and click.
WebElement mnuElement;
WebElement submnuElement;
mnEle = driver.findElement(By.Id("mnEle")).click();
sbEle = driver.findElement(By.Id("sbEle")).click();
Actions builder = new Actions(driver);
// Move cursor to the Main Menu Element
builder.MoveToElement(mnEle).perform();
// Giving 5 Secs for submenu to be displayed
Thread.sleep(5000L);
// Clicking on the Hidden SubMenu
driver.findElement(By.Id("sbEle")).click();
You can read some additional info here
Hope this works for you)

here is solution for Ruby:
To select value from list needs to execute javascript, here is example:
HTML:
<select id="select_id">
<option id="option_id_1" value="value_1" name="OPTION1"> OPTION1 </option>
<option id="option_id_2" value="value_2" name="OPTION2"> OPTION2 </option>
Updated:
much easier way:
$('#select_id').val(value_1)
Code:
find elements by id attribute:
browser.execute_script("$('#select_id').val($('#option_id_1').val())")
find elements by name attribute:
browser.execute_script("$('#select_id').val($('option[name=OPTION2]').val())")
Works perfectly for me.

Mobile Web - Disable long-touch/taphold text selection

I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and brings up little flags to drag and select text. I need to disable those (see image):
I've tried -webkit-touch-callout to no avail, and even tried things like $('body').on('select',function(e){e.preventDefault();return;}); to no avail. And the cheap tricks like ::selection:rgba(0,0,0,0); won't work either, as hiding these won't help - selection still happens and it disrupts the UI. Plus I'm guessing those flags would still be there.
Any thoughts would be great. Thanks!

-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
This will disable it for every browser going.

Reference:
jsFiddle Demo with Plugin
The above jsFiddle Demo I made uses a Plugin to allow you to prevent any block of text from being selected in Android or iOS devices (along with desktop browsers too).
It's easy to use and here is the sample markup once the jQuery plugin is installed.
Sample HTML:
<p class="notSelectable">This text is not selectable</p>
<p> This text is selectable</p>
Sample jQuery:
$(document).ready(function(){
$('.notSelectable').disableSelection();
});
Plugin code:
$.fn.extend({
disableSelection: function() {
this.each(function() {
this.onselectstart = function() {
return false;
};
this.unselectable = "on";
$(this).css('-moz-user-select', 'none');
$(this).css('-webkit-user-select', 'none');
});
return this;
}
});
Per your message comment: I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.
I would simply would use a wrapper that is not affected by this plugin, yet it's text-contents are protected using this plugin.
To allow interaction with a link in a block of text, you can use span tags for all but the link and add class name .notSelected for those span tags only, thus preserving selection and interaction of the anchors link.
Status Update: This updated jsFiddle confirms you concern that perhaps other functions may not work when text-selection is disabled. Shown in this updated jsFiddle is jQuery Click Event listener that will fire a Browser Alert for when the Bold Text is clicked on, even if that Bold Text is not text-selectable.

-webkit-user-select:none; wasn't supported on Android until 4.1 (sorry).