Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stuck in an invalid state #830

Closed
4 of 7 tasks
joostdebruijn opened this issue Jul 22, 2019 · 6 comments
Closed
4 of 7 tasks

Stuck in an invalid state #830

joostdebruijn opened this issue Jul 22, 2019 · 6 comments
Assignees
Labels

Comments

@joostdebruijn
Copy link

@joostdebruijn joostdebruijn commented Jul 22, 2019

Description

When a vaadin-combo-box is required and the vaadin-combo-box has been selected, but nothing is chosen, the inner vaadin-text-field will be marked as invalid when deselecting the vaadin-combo-box. However, if the required attribute is removed in the meantime, the inner vaadin-text-field is still in the invalid-state.

Expected outcome

Changing attributes (or at least the required attribute) on the vaadin-combo-box should trigger a revalidation of the underlying vaadin-text-field.

Actual outcome

The vaadin-text-field is stuck in an invalid state. The form can't be submitted because of this invalid state.

Live Demo

https://ring-umbra.glitch.me

Steps to reproduce

  1. Open the demo
  2. Click in the vaadin-combo-box. The options will be display, but do not select an item (click somewhere in the white space)
  3. Check the checkbox to make the field required.
  4. Repeat step 2, the vaadin-combo-box will color red and is in an invalid state.
  5. Uncheck the checkbox, the field is no longer required
  6. Repeat step 2, the vaadin-combo-box will remain in an invalid state
  7. Select something in the vaadin-combo-box
  8. Use the clear button to empty the vaadin-combo-box: the vaadin-combo-box is still in an invalid state, although it is no longer required.

Changing the invalid attribute on the vaadin-combo-box doens't solve the problem as well, it looks like this value is not reflected in the inner vaadin-text-field.

Browsers Affected

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE 11
  • iOS Safari
  • Android Chrome

I think the other browsers have the same issue, however I was not able to test them

@Haprog Haprog self-assigned this Aug 5, 2019
@Haprog Haprog added the bug label Aug 5, 2019
@Haprog
Copy link
Member

@Haprog Haprog commented Aug 5, 2019

This seems to be a bug in vaadin-text-field instead. vaadin-combo-box just syncs the required and invalid properties with the internal vaadin-text-field.

I think dynamically changing required state (or other validation constraints) just hasn't been considered when developing the component.

The validation considers required, pattern, maxlength and minlength. If any of those are set, then it sets invalid boolean based on the return value of checkValidity() on the native <input>. If none of those are set you can still manually set invalid to true or false based on your own logic and vaadin-text-field keeps the invalid state as it has been set.

The problem seems to be that when you only have one of those validation constraints set (e.g. required) and the field has been validated and become invalid, and then you remove the constraint, it doesn't run checkValidity() on the native input anymore and it keeps the invalid state (as if it had been added manually). Basically the text field never automatically removes invalid state when there are no active validation constraints.

I think the proper logic here would be to observe when any of required, pattern, maxlength or minlength constraints is removed and invalid == true already, then set this.invalid = this.inputElement.checkValidity();

@Haprog
Copy link
Member

@Haprog Haprog commented Aug 5, 2019

This can be reproduced with vaadin-text-field just by having:

<vaadin-text-field required="{{tfRequired}}"></vaadin-text-field><br>
<label>Required <input type="checkbox" checked="{{tfRequired::change}}"></label>
  1. toggle checkbox on (makes text field required)
  2. focus and unfocus the text field (makes it invalid since it's still empty)
  3. toggle checkbox off (makes text field not required)
  4. write something in the text field and unfocus it, notice that text field is still shown as invalid

@Haprog
Copy link
Member

@Haprog Haprog commented Aug 5, 2019

I opened an issue about this here vaadin/vaadin-text-field#400 but I'll leave this combo box issue here for better visibility if someone else notices the issue with combo box. This should be closed after the above text field issue is fixed.

@Haprog
Copy link
Member

@Haprog Haprog commented Aug 9, 2019

This fix has been released in vaadin-text-field v2.3.9 and v2.4.10.

@Haprog Haprog closed this Aug 9, 2019
@joostdebruijn
Copy link
Author

@joostdebruijn joostdebruijn commented Aug 14, 2019

I can confirm it is working as expected now. Thanks voor the good work, @Haprog! 😄

@Haprog
Copy link
Member

@Haprog Haprog commented Aug 20, 2019

Btw. afaik the WebJars for vaadin-text-field v2.3.9 and v2.4.10 are broken, so if you need to use these from Java (Vaadin 10–13 or Vaadin 14 in compatibility mode) you need to wait a bit. We should release v2.3.10 and v2.4.11 soon with working WebJars.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants