Keyed elements seem to be borked if CSS is too naughty

[Quelklef]

Synopsis

• My model is Array String, initialized to ["A", "B"]
• The view function renders one <p> per string, giving it an outline and background color
• On button click, the model is changed to ["B", "A"]
• The <p> corresponding to "B" gets stripped of its styling

Notes

The relevant factors seem to be:

1. using a keyed element; and
2. having different CSS for the two elements

If an unkeyed element is used, or if the two <p>s are rendered with the same background color, the bug does not manifest.

Also:

• Note that I include the a border on both <p>s. This border is not conditionally calculated, but is also stripped when the button is clicked. It seems that all CSS is cleared.
• It doesn't seem to matter how exactly the background-color is generated. In the code, I just do it with an if, but the bug also manifested if the background-color was, say, stored in the model.
• The button has the text swap; this is actually misleading. It doesn't swap, it just sets the model to ["B", "A"]

Code

module Main (main) where

import Prelude
import Data.Tuple.Nested ((/\))

import Platform (Program, app)
import Attribute as A
import Html as H
import Css as S

main :: Program Unit (Array String) Unit
main = app
  { init: \_ -> pure [ "A", "B" ]
  , update: \strings _ -> pure [ "B", "A" ]
  , subscriptions: const mempty
  , view: \strings ->
      { head: [ ]
      , body:
        [ H.div [ ]
          [ H.buttonS
            [ S.active [ S.background "black" ] ]
            [ A.onClick unit ]
            [ H.text "swap" ]
          , H.keyed "div"
            [ ]
            ( strings <#> (\string ->
                string
                  /\
                H.pS
                [ S.border "1px solid black"
                , S.background $ if string == "A" then "cyan" else "pink"
                ]
                [ ]
                [ H.text string ]
            ) )
          ]
        ]
      }
  }

[ursi]

Oh wow, I guess github closes issue n automatically if you name your commit Fix #n. But yeah, fixed :+1: . Just needed to swap two args around.

[Quelklef]

oh, wow, that's a tiny fix!

thanks! :tada: