@@ -20,6 +20,9 @@ export interface FormEditorProps {
20
20
// The label.
21
21
label ?: string ;
22
22
23
+ // Indicates that the input should be focused automatically.
24
+ autoFocus ?: boolean ;
25
+
23
26
// The optional class name.
24
27
className ?: string ;
25
28
@@ -169,67 +172,67 @@ export module Forms {
169
172
) ;
170
173
} ;
171
174
172
- export const Text = ( { placeholder, ...other } : FormEditorProps ) => {
175
+ export const Text = ( { autoFocus , placeholder, ...other } : FormEditorProps ) => {
173
176
return (
174
177
< Forms . Row { ...other } >
175
- < InputText name = { other . name } placeholder = { placeholder } />
178
+ < InputText name = { other . name } placeholder = { placeholder } autoFocus = { autoFocus } />
176
179
</ Forms . Row >
177
180
) ;
178
181
} ;
179
182
180
- export const Phone = ( { placeholder, ...other } : FormEditorProps ) => {
183
+ export const Phone = ( { autoFocus , placeholder, ...other } : FormEditorProps ) => {
181
184
return (
182
185
< Forms . Row { ...other } >
183
- < InputSpecial type = 'tel' name = { other . name } placeholder = { placeholder } />
186
+ < InputSpecial type = 'tel' name = { other . name } placeholder = { placeholder } autoFocus = { autoFocus } />
184
187
</ Forms . Row >
185
188
) ;
186
- }
189
+ } ;
187
190
188
- export const Url = ( { placeholder, ...other } : FormEditorProps ) => {
191
+ export const Url = ( { autoFocus , placeholder, ...other } : FormEditorProps ) => {
189
192
return (
190
193
< Forms . Row { ...other } >
191
- < InputSpecial type = 'url' name = { other . name } placeholder = { placeholder } />
194
+ < InputSpecial type = 'url' name = { other . name } placeholder = { placeholder } autoFocus = { autoFocus } />
192
195
</ Forms . Row >
193
196
) ;
194
197
} ;
195
198
196
- export const Email = ( { placeholder, ...other } : FormEditorProps ) => {
199
+ export const Email = ( { autoFocus , placeholder, ...other } : FormEditorProps ) => {
197
200
return (
198
201
< Forms . Row { ...other } >
199
- < InputSpecial type = 'email' name = { other . name } placeholder = { placeholder } />
202
+ < InputSpecial type = 'email' name = { other . name } placeholder = { placeholder } autoFocus = { autoFocus } />
200
203
</ Forms . Row >
201
204
) ;
202
205
} ;
203
206
204
- export const Time = ( { placeholder, ...other } : FormEditorProps ) => {
207
+ export const Time = ( { autoFocus , placeholder, ...other } : FormEditorProps ) => {
205
208
return (
206
209
< Forms . Row { ...other } >
207
- < InputSpecial type = 'time' name = { other . name } placeholder = { placeholder } />
210
+ < InputSpecial type = 'time' name = { other . name } placeholder = { placeholder } autoFocus = { autoFocus } />
208
211
</ Forms . Row >
209
212
) ;
210
213
} ;
211
214
212
- export const Date = ( { placeholder, ...other } : FormEditorProps ) => {
215
+ export const Date = ( { autoFocus , placeholder, ...other } : FormEditorProps ) => {
213
216
return (
214
217
< Forms . Row { ...other } >
215
- < InputSpecial type = 'date' name = { other . name } placeholder = { placeholder } />
218
+ < InputSpecial type = 'date' name = { other . name } placeholder = { placeholder } autoFocus = { autoFocus } />
216
219
</ Forms . Row >
217
220
) ;
218
221
} ;
219
222
220
- export const Textarea = ( { placeholder, ...other } : FormEditorProps ) => {
223
+ export const Textarea = ( { autoFocus , placeholder, ...other } : FormEditorProps ) => {
221
224
return (
222
225
< Forms . Row { ...other } >
223
- < InputTextarea name = { other . name } placeholder = { placeholder } />
226
+ < InputTextarea name = { other . name } placeholder = { placeholder } autoFocus = { autoFocus } />
224
227
</ Forms . Row >
225
228
) ;
226
229
} ;
227
230
228
- export const Number = ( { max, min, placeholder, step, unit, ...other } : FormEditorProps & { unit ?: string ; min ?: number ; max ?: number ; step ?: number } ) => {
231
+ export const Number = ( { autoFocus , max, min, placeholder, step, unit, ...other } : FormEditorProps & { unit ?: string ; min ?: number ; max ?: number ; step ?: number } ) => {
229
232
return (
230
233
< Forms . Row { ...other } >
231
234
< InputGroup >
232
- < InputNumber name = { other . name } placeholder = { placeholder } max = { max } min = { min } step = { step } />
235
+ < InputNumber name = { other . name } placeholder = { placeholder } max = { max } min = { min } step = { step } autoFocus = { autoFocus } />
233
236
234
237
{ unit &&
235
238
< InputGroupAddon addonType = 'prepend' >
@@ -241,10 +244,10 @@ export module Forms {
241
244
) ;
242
245
} ;
243
246
244
- export const Password = ( props : FormEditorProps ) => {
247
+ export const Password = ( { autoFocus , placeholder , ... other } : FormEditorProps ) => {
245
248
return (
246
- < Forms . Row { ...props } >
247
- < InputPassword name = { props . name } placeholder = { props . placeholder } />
249
+ < Forms . Row { ...other } >
250
+ < InputPassword name = { other . name } placeholder = { placeholder } autoFocus = { autoFocus } />
248
251
</ Forms . Row >
249
252
) ;
250
253
} ;
@@ -282,7 +285,7 @@ const FormDescription = ({ hints }: { hints?: string }) => {
282
285
) ;
283
286
} ;
284
287
285
- const InputText = ( { name, picker, placeholder } : FormEditorProps ) => {
288
+ const InputText = ( { autoFocus , name, picker, placeholder } : FormEditorProps ) => {
286
289
const { field, fieldState, formState } = useController ( { name } ) ;
287
290
288
291
const doAddPick = useEventCallback ( ( pick : string ) => {
@@ -295,14 +298,14 @@ const InputText = ({ name, picker, placeholder }: FormEditorProps) => {
295
298
< Picker { ...picker } onPick = { doAddPick } value = { field . value } />
296
299
}
297
300
298
- < Input type = 'text' id = { name } { ...field } invalid = { isInvalid ( fieldState , formState ) }
301
+ < Input type = 'text' id = { name } { ...field } invalid = { isInvalid ( fieldState , formState ) } autoFocus = { autoFocus }
299
302
placeholder = { placeholder }
300
303
/>
301
304
</ div >
302
305
) ;
303
306
} ;
304
307
305
- const InputTextarea = ( { name, picker, placeholder } : FormEditorProps ) => {
308
+ const InputTextarea = ( { autoFocus , name, picker, placeholder } : FormEditorProps ) => {
306
309
const { field, fieldState, formState } = useController ( { name } ) ;
307
310
308
311
const doAddPick = useEventCallback ( ( pick : string ) => {
@@ -315,31 +318,31 @@ const InputTextarea = ({ name, picker, placeholder }: FormEditorProps) => {
315
318
< Picker { ...picker } onPick = { doAddPick } value = { field . value } />
316
319
}
317
320
318
- < Input type = 'textarea' id = { name } { ...field } invalid = { isInvalid ( fieldState , formState ) }
321
+ < Input type = 'textarea' id = { name } { ...field } invalid = { isInvalid ( fieldState , formState ) } autoFocus = { autoFocus }
319
322
placeholder = { placeholder }
320
323
/>
321
324
</ div >
322
325
) ;
323
326
} ;
324
327
325
- const InputNumber = ( { name, max, min, placeholder, step } : FormEditorProps & { min ?: number ; max ?: number ; step ?: number } ) => {
328
+ const InputNumber = ( { autoFocus , name, max, min, placeholder, step } : FormEditorProps & { min ?: number ; max ?: number ; step ?: number } ) => {
326
329
const { field, fieldState, formState } = useController ( { name } ) ;
327
330
328
331
return (
329
332
< >
330
- < Input type = 'number' id = { name } { ...field } invalid = { isInvalid ( fieldState , formState ) }
333
+ < Input type = 'number' id = { name } { ...field } invalid = { isInvalid ( fieldState , formState ) } autoFocus = { autoFocus }
331
334
max = { max } min = { min } step = { step } placeholder = { placeholder }
332
335
/>
333
336
</ >
334
337
) ;
335
338
} ;
336
339
337
- const InputSpecial = ( { name, placeholder, type } : FormEditorProps & { type : InputType } ) => {
340
+ const InputSpecial = ( { autoFocus , name, placeholder, type } : FormEditorProps & { type : InputType } ) => {
338
341
const { field, fieldState, formState } = useController ( { name } ) ;
339
342
340
343
return (
341
344
< >
342
- < Input type = { type } id = { name } { ...field } invalid = { isInvalid ( fieldState , formState ) }
345
+ < Input type = { type } id = { name } { ...field } invalid = { isInvalid ( fieldState , formState ) } autoFocus = { autoFocus }
343
346
placeholder = { placeholder }
344
347
/>
345
348
</ >
@@ -350,7 +353,7 @@ const InputPassword = ({ name, placeholder }: FormEditorProps) => {
350
353
351
354
return (
352
355
< >
353
- < PasswordInput id = { name } { ...field } invalid = { isInvalid ( fieldState , formState ) }
356
+ < PasswordInput id = { name } { ...field } invalid = { isInvalid ( fieldState , formState ) } autoFocus = { autoFocus }
354
357
placeholder = { placeholder }
355
358
/>
356
359
</ >
0 commit comments