1
- import { PropsOf , component$ , useContext , useSignal , useTask$ } from '@builder.io/qwik' ;
1
+ import { PropsOf , component$ , useContext , useSignal } from '@builder.io/qwik' ;
2
2
import SelectContextId from './select-context' ;
3
- import { isServer } from '@builder.io/qwik/build ' ;
3
+ import { HiddenSelectOption } from './hidden-select-option ' ;
4
4
import { VisuallyHidden } from '../../utils/visually-hidden' ;
5
5
6
6
export type AriaHiddenSelectProps = {
@@ -19,6 +19,10 @@ export type AriaHiddenSelectProps = {
19
19
disabled ?: boolean ;
20
20
21
21
required ?: boolean ;
22
+
23
+ // from modular forms
24
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
25
+ field ?: any ;
22
26
} ;
23
27
24
28
export const HHiddenNativeSelect = component$ (
@@ -27,28 +31,15 @@ export const HHiddenNativeSelect = component$(
27
31
const context = useContext ( SelectContextId ) ;
28
32
29
33
// modular forms does something with refs, doesn't seem we need it, and it overrides the ref we define here.
30
- ref ;
31
-
32
34
const nativeSelectRef = useSignal < HTMLSelectElement > ( ) ;
33
35
34
- useTask$ ( function modularFormsValidation ( { track } ) {
35
- track ( ( ) => context . selectedIndexSetSig . value ) ;
36
-
37
- if ( isServer ) return ;
38
-
39
- // modular forms expects the input event fired after interaction
40
- const inputEvent = new Event ( 'input' , { bubbles : false } ) ;
41
- nativeSelectRef . value ?. dispatchEvent ( inputEvent ) ;
42
- } ) ;
43
-
44
36
// TODO: make conditional logic to show either input or select based on the size of the options.
45
37
return (
46
38
< VisuallyHidden >
47
39
< div aria-hidden = "true" >
48
40
< label >
49
41
{ label }
50
42
< select
51
- onFocus$ = { ( ) => context . triggerRef . value ?. focus ( ) }
52
43
ref = { ( element : HTMLSelectElement ) => {
53
44
nativeSelectRef . value = element ;
54
45
// @ts -expect-error modular forms ref function
@@ -66,13 +57,13 @@ export const HHiddenNativeSelect = component$(
66
57
>
67
58
< option />
68
59
{ Array . from ( context . itemsMapSig . value . entries ( ) ) . map ( ( [ index , item ] ) => (
69
- < option
70
- value = { item . value }
71
- selected = { context . selectedIndexSetSig . value . has ( index ) }
60
+ < HiddenSelectOption
72
61
key = { item . value }
73
- >
74
- { item . displayValue }
75
- </ option >
62
+ value = { item . value }
63
+ displayValue = { item . displayValue }
64
+ nativeSelectRef = { nativeSelectRef }
65
+ index = { index }
66
+ />
76
67
) ) }
77
68
</ select >
78
69
</ label >
0 commit comments