Using JqGrid on Android based tablets with new Chrome browser

[unle70]

Hi Tony (and everyone),

I just came across an interesting issue that people might want to know about.
I'm not sure if this issue exists only in my location or everywhere, but I will describe my specific conditions here:

Location: China
Device: Android Tablets of various brands
Browser: Chrome - Behaving differently on old versions (< v101) compared to newer versions.
On-Screen Keyboard: Chinese / English keyboard, non-standard (not the one supplied with the device). This is because the standard one is HUGE and takes most of the visible area of the screen.

The on-screen keyboard has a button on the lower right. The writing is in Chinese, but the meaning is "Finish". There's no "ENTER" or "TAB" keys on this keyboard.

When using "older" versions of Chrome (< v101), this key acts as "ENTER" key. When editing an INPUT field, it terminates the editing. But with newer versions of Chrome this key acts as "TAB" key, so the focus shifts to the next INPUT field and the editing can never terminate. This creates a big problem in the search bar (for example), where you cannot activate the search.

I have found a solution for this issue and have implemented it as a "patch" in my code (in the gridComplete handler).
In every INPUT element, can add the attribute: enterkeyhint="done"
This returns the functionality to the way it was in older versions of Chrome. So far I have not seen any downsides to this solution.

Perhaps you can consider adding this attribute to all the INPUT elements as default in the jqGrid code. Or maybe you have another good solution instead.

[krisred]

Thanks @unle70 for bringing this issue up. I have noticed this as well on Samsung tablets with Chrome browser when searching in toolbar search. I will try and implement your solution.

[Tony Tomov]

Hello,

It is not needed to do this so complex. As we write in the docs - in editoptions object you can add any property to any input element .

So I think it is not needed to do anything. you will need just to do it so

colModel : [ 
{ name: "field1",... editable : true, editoptions : { ..., enterkeyhint : "done"...,}...},
...
]

Of course you can use templates to do it simple and write it once:

[unle70]

Hi Tony,

Yes, I forgot about this option of using "editoptions" even when your edit type is non-custom.
For the benefit of any other readers who might be reading this, my immediate problem was with the SEARCH bar. But I guess this can also be resolved in a very similar way:

colModel : [ 
{ name: "field1",..., searchoptions : { ..., enterkeyhint : "done"...,}...},
...
]

Thank you for this solution. I will switch my code to using this way.