markInvalid and tab logic

edited March 2020 in Technical questions

When the field is marked as invalid, the focus change logic does not work properly.
https://snippet.webix.com/3vbdrlts

How to reproduce:
1) Focus in login-field:
2) Type "123";
3) Press "tab".

https://imgur.com/a/FppDTIQ

Tagged:

Comments

  • edited April 2020

    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.

    https://snippet.webix.com/jmy51bdh

    https://imgur.com/a/M3QG9xL

  • edited April 2020

    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.

  • edited February 3

    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:

    As a workaround, I would like to suggest the following solution: https://snippet.webix.com/yrcrvo34.

  • @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?

  • edited February 4

    @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.

    https://snippet.webix.com/9zcb6dj4
    https://imgur.com/a/auCQUcv

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!