When the field is marked as invalid, the focus change logic does not work properly.
https://snippet.webix.com/3vbdrlts
How to reproduce:
- Focus in login-field:
- Type “123”;
- Press “tab”.
Hello @lBeJIuk,
When the field is marked as invalid, the focus change logic does not work properly.
I don’t think this can be classified as a bug, since the onChange event in this case is triggered correctly - right after the input with the modified value has lost it focus. As the event gets triggered, a validation is performed. As you switch to the next input the focus gets lost because of the validation error, as is expected in this case.
@Dzmitry Hello. Thank you for answering.
The loss of focus is not caused by a validation check, but by calling the markInvalid method.
The loss of focus is not caused by a validation check, but by calling the markInvalid method.
Essentially, what I meant was: under normal circumstances the invalid message will be displayed most of the times the validation process fails (via invalidMessage) → this means that a failed validation is indirectly causing this, i.e. https://snippet.webix.com/zz6q8n13 (but, of course, the markInvalid method is still being called in the private logic).
But you are right, it is actually the markInvalid() method that is directly responsible for this behaviour. Still, I do not see how tab logic in particular relates to this, as the markInvalid() method on this own will always cause the input to lose its focus, hence the behaviour is within the expected norm.
@Dzmitry
Yeah, you’re right, there’s no direct correlation. I just wanted to show you a case where I don’t get the expected behavior.
I don’t really understand why markInvalid works like this. Why it is necessary to remove the input when calling the markInvalid function. That was my question.
Hello. I would like to clarify whether any improvements are planned in this matter? As it is very uncomfortable that focus is lost during validation.
Hello @lBeJIuk,
I don’t really understand why markInvalid works like this. Why it is necessary to remove the input when calling the markInvalid function. That was my question.
Here, the reason why the focus is lost is not inherently caused by the call of the markInvalid() method. It has to do with the invalidMessage attached to the call of this method (or during validation in general). Essentially, in order for this message to be displayed, the component has to be redrawn, hence why the focus is lost (validation logic gets triggered before tab logic in this case, since the validation is attached to the onChange event handler). You can see the difference in the behaviour here:
-
no invalidMessage: Code Snippet
-
invalidMessage: Code Snippet
As a workaround, I would like to suggest the following solution: Code Snippet.
@Dzmitry
Thank you for your reply. I suppose that for my custom programming this solution will work.
Only you need to add a onValidationSuccess handler to clear the message.
https://snippet.webix.com/fxfeexuh
P.S. This will not work for invalidMessage-config (the focus will be lost). Are there any future plans to implement refocus in webix-core to make this work out of the box?
@Dzmitry
Hello again. Found another strange behavior. If textarea is used, this workaround does not work. But only if the field in front of the textarea is focused first.