Testing - Dropdown Select

Pristine

<hx-select-control>

Optional

<select>

:valid	:invalid*
Pristine, Optional, Enabled, Valid (blur)	Pristine, Optional, Enabled, Invalid (blur)
Pristine, Optional, Enabled, Valid (focus)	Pristine, Optional, Enabled, Invalid (focus)
Pristine, Optional, Disabled, Valid (blur)	Pristine, Optional, Disabled, Invalid (blur)
Pristine, Optional, Disabled, Valid (focus)	Pristine, Optional, Disabled, Invalid (focus)

JavaScript required to match :optional:invalid

Required

<select required>

:valid	:invalid
Pristine, Required, Enabled, Valid (blur)	Pristine, Required, Enabled, Invalid (blur)
Pristine, Required, Enabled, Valid (focus)	Pristine, Required, Enabled, Invalid (focus)
Pristine, Required, Disabled, Valid (blur)	Pristine, Required, Disabled, Invalid (blur)
Pristine, Required, Disabled, Valid (focus)	Pristine, Required, Disabled, Invalid (focus)

Dirty

<hx-select-control hx-dirty>

Optional

<select>

:valid	:invalid*
Dirty, Optional, Enabled, Valid (blur)	Dirty, Optional, Enabled, Invalid (blur)
Dirty, Optional, Enabled, Valid (focus)	Dirty, Optional, Enabled, Invalid (focus)
Dirty, Optional, Disabled, Valid (blur)	Dirty, Optional, Disabled, Invalid (blur)
Dirty, Optional, Disabled, Valid (focus)	Dirty, Optional, Disabled, Invalid (focus)

JavaScript required to match :optional:invalid

Required

<select required>

:valid	:invalid
Dirty, Required, Enabled, Valid (blur)	Dirty, Required, Enabled, Invalid (blur)
Dirty, Required, Enabled, Valid (focus)	Dirty, Required, Enabled, Invalid (focus)
Dirty, Required, Disabled, Valid (blur)	Dirty, Required, Disabled, Invalid (blur)
Dirty, Required, Disabled, Valid (focus)	Dirty, Required, Disabled, Invalid (focus)

Visually Invalid

<hx-select-control class="hxInvalid">

Optional

<select>

:valid	:invalid*
.hxInvalid, Optional, Enabled, Valid (blur)	.hxInvalid, Optional, Enabled, Invalid (blur)
.hxInvalid, Optional, Enabled, Valid (focus)	.hxInvalid, Optional, Enabled, Invalid (focus)
.hxInvalid, Optional, Disabled, Valid (blur)	.hxInvalid, Optional, Disabled, Invalid (blur)
.hxInvalid, Optional, Disabled, Valid (focus)	.hxInvalid, Optional, Disabled, Invalid (focus)

JavaScript required to match :optional:invalid

Required

<select required>

:valid	:invalid
.hxInvalid, Required, Enabled, Valid (blur)	.hxInvalid, Required, Enabled, Invalid (blur)
.hxInvalid, Required, Enabled, Valid (focus)	.hxInvalid, Required, Enabled, Invalid (focus)
.hxInvalid, Required, Disabled, Valid (blur)	.hxInvalid, Required, Disabled, Invalid (blur)
.hxInvalid, Required, Disabled, Valid (focus)	.hxInvalid, Required, Disabled, Invalid (focus)

Layout

Extra elements should not be visible.

select + hx-select

select + hx-select + label

label

select + label + hx-select

label

select + div + hx-select + label

div

label

select + label + div + hx-select

label

div

div + select + label + hx-select

div

label

div + select + hx-error + label + hx-select

div

hx-error

label

Miscellaneous

lengthy option - enabled

lengthy option - disabled