BUG : All elements keep focus on mobile

I have a strange behavior on mobile version of my site.
All buttons or inputs keep the focus.

You click on a button the action is run, but after the focus is still on the button. The only way to remove it is to tap with my finger somewhere else in the screen (background of other element). I tested it on iPhone iOS 15.4.

This bug is really annoying. As to get the validity check of Richtextedit or other input, they need to loose the focus. It makes my dataset allowing empty text stored even if Richtextedit is required !

Does anyone solved that already ?

First of all you can check validity while you’re focused.
To that check the validity onInput (and for the richText use onKeyPress with a tiny timeout),

Second, I don’t understand how you expect it to lose focus if not by typing?
If you wish to lose focus by clicking the enter key, you should do:

$w('#input1, #input2, #richetext1').onKeyPress(event => {
if(event.key === 'Enter'){$w('#' + event.target.id).blur();} 
//Then run validity text
})

Thank you for your answer.
Not sure I was clear in my explanation :sweat_smile:.
When I click on a button in the page on Mobile, the button receive the click event and proceed.
But regarding the look (or style), it is still shown with the “mouse hover” as set with focus style in the Editor. Because from mobile phone point of view, the pointer (my finger) has not moved from where it was when I clicked. And it will not change until I tap somewhere else in the screen.

In desktop, has soon I move my mouse somewhere else the button “loose the focus” (but I do not need to click somewhere, just to move the mouse.

This behavior make user feel like “the button is not finished to click” because it does not come back to standard style.

Any idea of shortcut to avoid this behavior ? (like force by code a click in background of the page to move the finger somewhere else)

Regarding the Richtextedit, it is more complex than I thought, because it is also related to 2 other issues :
First, setting the “Required” in the Editor, does not change the required attribute in Velo to true.
And second, when I set required to true by velo code, if the user empty the text, the attribute value is not really empty because it let “

”. I was obliged to really empty it by code to make it work.

I am having the same issue. Button works fine on desktop, but on mobile devices after the button is clicked it remains in focus and highlighted with the hover color until another screen element is clicked. Unfortunately, blur() cannot be applied to buttons, and if the button is connected to a dataset in the Editor adding an onClick() event seems to cause a conflict.