Mobile Extended Attribute not rendered

Im developing a mobile application and want to use the number keyboard on the mobile devices on a certain input field. I tested on the devices on jsfiddle that if I add inputmode="decimal" it will give the correct behavior. 

However when I add that attribute in outsystems the rendered control does not have that attribute added, but others such as pattern and placeholder work correctly. 

I can even override the input type via the attributes




and I can't use the number input type since that allows the user to still use text if they switch keyboard and since it outsystems a blank number is a 0, and I want to explicitly capture if there are blank 'null' values

Hi Johann,

Unfortunately React removes attributes it does not recognize. That will be fixed in a future version. In the meantime you'll have to workaround it with a JavaScript Element that appends that attribute to the input, e.g. on the OnReady event. Pass the input id as a parameter to the JavaScript element and set the attribute there. Something like:
document.getElementById(InputId).setAttribute("inputmode", "decimal");


Cheers,

Tiago Simões

Hi Tiago


Your answer did add the attribute but it still didn't allow the keyboard, as it does if I open it in JSFiddle with or without react. I did also see that if you camelCase the attribute outsystems doesn't remove it e.g: inputMode="decimal" will render the attribute but still doesn't work. 


Kind Regards

JJ

Hi Johann.

  • When using an input type = “text” we usually have some issues on displaying the right keyboard to the end-user.

  • In order to overcome this issue, we don’t have a perfect solution for both Android and iOS, so we can have an approach to make it as useful as possible:

    • For iOS, we’ll get what we need.

    • For Android, we’ll get something close.

  • For that, we’ll add some special attributes (for iOS) and we’ll need to change the input type to “tel” via attribute that will overwrite the value set at the input level.

So, if I understood you're use case well, you can apply the following tweaks:


Best Regards,

Gonçalo Martins