added support for autofocus

digitallyinduced · Feb 19, 2021 · d6ccd67 · d6ccd67
1 parent 066edfc
commit d6ccd67
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 4 deletions.
diff --git a/Guide/form.markdown b/Guide/form.markdown
@@ -245,6 +245,31 @@ This will render like:
 </div>
 ```
 
+### Autofocus
+
+You can mark an input with autofocus, to ensure it will be given the input focus on page load, like this:
+
+```haskell
+{(textField #title) { autofocus = True } }
+```
+
+This will render like:
+
+```html
+<div class="form-group" id="form-group-post_title">
+    <label for="post_title">Title</label>
+
+    <input
+        type="text"
+        name="title"
+        id="post_title"
+        autofocus="autofocus"
+        class="form-control"
+    />
+</div>
+```
+
+
 ### Custom Submit Button Text
 
 Customize it like this:

diff --git a/IHP/View/CSSFramework.hs b/IHP/View/CSSFramework.hs
@@ -78,7 +78,7 @@ instance Default CSSFramework where
                     validationResult = unless (get #disableValidationResult formField) ((get #styledValidationResult cssFramework) cssFramework formField)
 
                     renderCheckboxFormField :: FormField -> Blaze.Html
-                    renderCheckboxFormField formField@(FormField {fieldType, fieldName, fieldLabel, fieldValue, validatorResult, fieldClass, disableLabel, disableValidationResult, fieldInput, labelClass, required }) = do
+                    renderCheckboxFormField formField@(FormField {fieldType, fieldName, fieldLabel, fieldValue, validatorResult, fieldClass, disableLabel, disableValidationResult, fieldInput, labelClass, required, autofocus }) = do
                         formGroup do
                             (H.div ! A.class_ "form-check") do
                                 let element = if disableLabel then H.div else H.label ! A.class_ (if labelClass == "" then "form-check-label" else H.textValue labelClass)
@@ -88,6 +88,7 @@ instance Default CSSFramework where
                                             ! A.name fieldName
                                             ! A.class_ (cs $ classes ["form-check-input", (inputInvalidClass, isJust validatorResult), (fieldClass, not (null fieldClass))])
                                             !? (required, A.required "required")
+                                            !? (autofocus, A.autofocus "autofocus")
                                             !? (fieldValue == "yes", A.checked "checked")
                                     theInput
                                     H.input ! A.type_ "hidden" ! A.name fieldName ! A.value (cs $ inputValue False)
@@ -96,7 +97,7 @@ instance Default CSSFramework where
                                     helpText
 
                     renderTextField :: Blaze.AttributeValue -> FormField -> Blaze.Html
-                    renderTextField inputType formField@(FormField {fieldType, fieldName, fieldLabel, fieldValue, fieldInputId, validatorResult, fieldClass, disableLabel, disableValidationResult, fieldInput, labelClass, placeholder, required }) =
+                    renderTextField inputType formField@(FormField {fieldType, fieldName, fieldLabel, fieldValue, fieldInputId, validatorResult, fieldClass, disableLabel, disableValidationResult, fieldInput, labelClass, placeholder, required, autofocus }) =
                         formGroup do
                             unless (disableLabel || null fieldLabel) [hsx|<label class={labelClass} for={fieldInputId}>{fieldLabel}</label>|]
                             let theInput = (fieldInput formField)
@@ -106,15 +107,16 @@ instance Default CSSFramework where
                                     ! A.id (cs fieldInputId)
                                     ! A.class_ (cs $ classes [inputClass, (inputInvalidClass, isJust validatorResult), (fieldClass, not (null fieldClass))])
                                     !? (required, A.required "required")
+                                    !? (autofocus, A.autofocus "autofocus")
                             if fieldValue == "" then theInput else theInput ! A.value (cs fieldValue)
                             validationResult
                             helpText
 
                     renderSelectField :: FormField -> Blaze.Html
-                    renderSelectField formField@(FormField {fieldType, fieldName, placeholder, fieldLabel, fieldValue, fieldInputId, validatorResult, fieldClass, disableLabel, disableValidationResult, fieldInput, labelClass, required }) =
+                    renderSelectField formField@(FormField {fieldType, fieldName, placeholder, fieldLabel, fieldValue, fieldInputId, validatorResult, fieldClass, disableLabel, disableValidationResult, fieldInput, labelClass, required, autofocus }) =
                         formGroup do
                             unless disableLabel [hsx|<label class={labelClass} for={fieldInputId}>{fieldLabel}</label>|]
-                            H.select ! A.name fieldName ! A.id (cs fieldInputId) ! A.class_ (cs $ classes [inputClass, (inputInvalidClass, isJust validatorResult), (fieldClass, not (null fieldClass))]) ! A.value (cs fieldValue) !? (required, A.required "required") $ do
+                            H.select ! A.name fieldName ! A.id (cs fieldInputId) ! A.class_ (cs $ classes [inputClass, (inputInvalidClass, isJust validatorResult), (fieldClass, not (null fieldClass))]) ! A.value (cs fieldValue) !? (required, A.required "required") !? (autofocus, A.autofocus "autofocus") $ do
                                 let isValueSelected = isJust $ find (\(optionLabel, optionValue) -> optionValue == fieldValue) (options fieldType)
                                 (if isValueSelected then Blaze.option else Blaze.option ! A.selected "selected")  ! A.disabled "disabled" $ Blaze.text placeholder
                                 forEach (options fieldType) $ \(optionLabel, optionValue) -> (let option = Blaze.option ! A.value (cs optionValue) in (if optionValue == fieldValue then option ! A.selected "selected" else option) $ cs optionLabel)

diff --git a/IHP/View/Form.hs b/IHP/View/Form.hs
@@ -176,6 +176,7 @@ textField field = FormField
         , helpText = ""
         , placeholder = ""
         , required = False
+        , autofocus = False
         }
     where
         fieldName = symbolVal field
@@ -295,6 +296,7 @@ checkboxField field = FormField
         , helpText = ""
         , placeholder = ""
         , required = False
+        , autofocus = False
         }
     where
         fieldName = symbolVal field
@@ -333,6 +335,7 @@ selectField field items = FormField
         , helpText = ""
         , placeholder = "Please select"
         , required = False
+        , autofocus = False
     }
     where
         fieldName = symbolVal field

diff --git a/IHP/View/Types.hs b/IHP/View/Types.hs
@@ -54,6 +54,7 @@ data FormField = FormField
     , helpText :: !Text
     , placeholder :: !Text
     , required :: Bool
+    , autofocus :: Bool
     }
 
 data SubmitButton = SubmitButton

diff --git a/Test/View/CSSFrameworkSpec.hs b/Test/View/CSSFrameworkSpec.hs
@@ -53,6 +53,7 @@ tests = do
                         , helpText = ""
                         , placeholder = "Your firstname"
                         , required = False
+                        , autofocus = False
                         }
                 it "should render" do
                     let textField = baseTextField
@@ -93,6 +94,7 @@ tests = do
                         , helpText = ""
                         , placeholder = ""
                         , required = False
+                        , autofocus = False
                         }
                 it "should render" do
                     let checkbox = baseCheckbox
@@ -132,6 +134,7 @@ tests = do
                         , helpText = ""
                         , placeholder = "Please select"
                         , required = False
+                        , autofocus = False
                     }
 
                 it "should render" do