ino-select: required validation on form submit is not working

Describe the bug

An empty ino-select that is marked as required is not validated on form submit

To Reproduce

Steps to reproduce the behavior:

Go to https://elements.inovex.de/dist/latest/storybook/?path=/story/input-ino-select--forms
Try to submit the form without selecting a value in the ino-select
The form is submitted, indicated by the alert.

Expected behavior

The form should not submit and the ino-select should be marked as invalid (red).

Screenshots

Possible Solution

I assume, that the validation is missing, because the native HTML validation on form submit only validates native input fields. The ino-select only has a hidden input for synchronizing the value. Hidden inputs are ignored on form submit.

A possible solution is to use a non-hidden input and hide it via the css display property (none). Furthermore a Listener on the the 'invalid' event that is thrown by checkValidity() which is called on the native input field when a form is submitted, can invalidate the mdcSelect instance. This way works, but it should be evaluated further.

ino-select.tsx: `...

{this.required && (this.nativeInputElement = el)} required={this.required} > }

...` `... componentDidLoad() { this.nativeInputElement.addEventListener('invalid', () => { this.mdcSelectInstance.valid = false; }); }` ino-select.scss: `input { display: none; } `

JCofman commented 3 years ago

Hi @AlessaRad,

awesome thanks for your write-up :). As I looked into the issue I would also suggest changing the hidden <input> to a hidden native <select> element which is a more appropriate DOM element for this component.

AlessaRad commented 3 years ago

Hi @JCofman, I think the select element would be a valid alternative, if the value synchronisation still works. In the MDC select documentation the suggest the hidden input element: https://material.io/develop/web/components/input-controls/select-menus see section "Select with hidden input (for HTML forms)"

inovex / elements