reflex-frp / reflex-dom

Web applications without callbacks or side-effects. Reflex-DOM brings the power of functional reactive programming (FRP) to the web. Build HTML and other Document Object Model (DOM) data with a pure functional interface.
https://reflex-frp.org
BSD 3-Clause "New" or "Revised" License
357 stars 146 forks source link

Checked property doesn't work correctly for radio inputs #412

Open kmicklas opened 3 years ago

kmicklas commented 3 years ago

_inputElement_checked and _inputElement_checkedChange don't work properly for input input elements with type radio, because reflex-dom assumes the checkedness will always change in response to a click on the element. However, each radio button is its own input element and selecting one remotely deselects all others within the named group, which reflex-dom doesn't detect.

tellary commented 3 months ago

I've put together the following example to demonstrate this:

{-# LANGUAGE OverloadedStrings #-}

import qualified Data.Text as T
import           Reflex.Dom

main :: IO ()
main = mainWidget bodyElement

bodyElement :: (DomBuilder t m, PostBuild t m) => m ()
bodyElement = do
  radio1 <- inputElement
            $ def
            & inputElementConfig_initialValue .~ "radio1"
            & inputElementConfig_elementConfig
            . elementConfig_initialAttributes .~
            ("type" =: "radio" <> "name" =: "example")
  text " radio1. selected: "
  dynText $ T.pack . show <$> (_inputElement_checked $ radio1)
  el "br" blank

  radio2 <- inputElement
            $ def
            & inputElementConfig_initialValue .~ "radio2"
            & inputElementConfig_elementConfig
            . elementConfig_initialAttributes .~
            ("type" =: "radio" <> "name" =: "example")
  text " radio2. selected: "
  dynText $ T.pack . show <$> (_inputElement_checked $ radio2)
  el "br" blank

  radio3 <- inputElement
            $ def
            & inputElementConfig_initialValue .~ "radio3"
            & inputElementConfig_elementConfig
            . elementConfig_initialAttributes .~
            ("type" =: "radio" <> "name" =: "example")
  text " radio3. selected: "
  dynText $ T.pack . show <$> (_inputElement_checked $ radio3)
  el "br" blank

When I click on "radio1" the UI shows "checked: True" in the same line. When I click "radio2", the UI shows "checked: True" in the second line, but the "checked: True" text remains in the first line.

Any chance this is going to be addressed?