Fix radio field issues in Form.View.asHtml. Fixes #15

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [6.0.1] - 2018-11-24
+### Changed
+- Fix radio fields being rendered inside a main label when using `Form.View.asHtml`.
+- Remove `fieldset` parent when rendering radio fields using `Form.View.asHtml`.
+
 ## [6.0.0] - 2018-11-19
 ### Added
 - `Form.section` (thanks to @russelldavies).

elm.json

@@ -3,7 +3,7 @@
     "name": "hecrj/composable-form",
     "summary": "Build type-safe composable forms in Elm",
     "license": "BSD-3-Clause",
-    "version": "6.0.0",
+    "version": "6.0.1",
     "exposed-modules": [
         "Form",
         "Form.View",

examples/src/Page/ValidationStrategies.elm

@@ -70,13 +70,12 @@ form : Form Values Msg
 form =
     let
         validationStrategyField =
-            Form.selectField
+            Form.radioField
                 { parser = Ok
                 , value = .validationStrategy
                 , update = \value values -> { values | validationStrategy = value }
                 , attributes =
                     { label = "Validation strategy"
-                    , placeholder = "Choose a strategy"
                     , options =
                         [ Form.View.ValidateOnSubmit, Form.View.ValidateOnBlur ]
                             |> List.map strategyToOption

examples/styles.scss

@@ -125,6 +125,10 @@ form.elm-form, form.elm-form-multistage {
     }
   }
 
+  input[type="radio"] {
+    margin: .4rem;
+  }
+
   textarea {
     resize: vertical;
   }
@@ -242,4 +246,8 @@ fieldset {
   input {
     margin: .4rem;
   }
+
+  > label {
+    display: block;
+  }
 }

src/Form/View.elm

@@ -717,7 +717,7 @@ radioField : RadioFieldConfig msg -> Html msg
 radioField { onChange, onBlur, disabled, value, error, showError, attributes } =
     let
         radio ( key, label ) =
-            Html.div [ Attributes.class "elm-form-label" ]
+            Html.label []
                 [ Html.input
                     ([ Attributes.name attributes.label
                      , Attributes.value key
@@ -732,8 +732,12 @@ radioField { onChange, onBlur, disabled, value, error, showError, attributes } =
                 , Html.text label
                 ]
     in
-    Html.fieldset [] (List.map radio attributes.options)
-        |> withLabelAndError attributes.label showError error
+    Html.div (fieldContainerAttributes showError error)
+        ((fieldLabel attributes.label
+            :: List.map radio attributes.options
+         )
+            ++ [ maybeErrorMessage showError error ]
+        )
 
 
 selectField : SelectFieldConfig msg -> Html msg
@@ -778,12 +782,16 @@ section title fields =
 
 wrapInFieldContainer : Bool -> Maybe Error -> List (Html msg) -> Html msg
 wrapInFieldContainer showError error =
-    Html.label
-        [ Attributes.classList
-            [ ( "elm-form-field", True )
-            , ( "elm-form-field-error", showError && error /= Nothing )
-            ]
+    Html.label (fieldContainerAttributes showError error)
+
+
+fieldContainerAttributes : Bool -> Maybe Error -> List (Html.Attribute msg)
+fieldContainerAttributes showError error =
+    [ Attributes.classList
+        [ ( "elm-form-field", True )
+        , ( "elm-form-field-error", showError && error /= Nothing )
         ]
+    ]
 
 
 withLabelAndError : String -> Bool -> Maybe Error -> Html msg -> Html msg