Repository navigation
Styles get lost after model update #164
Description
Take a look at https://ellie-app.com/7ZFCDMKy54sa1 .
Look at the red square using the dev console and note the padding is a mixture of 5 and 20px.
Click the button.
Expect: padding-top of 5px
Actual: All mention of padding has been removed from html being rendered
module Main exposing (main)
import Browser
import Dict exposing (Dict)
import Html exposing (Html, button, div, text)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
type alias Model =
{ styles : Dict String Int }
initialModel : Model
initialModel =
{ styles =
Dict.fromList
[ ( "width", 100 )
, ( "height", 100 )
, ( "padding", 20 )
, ( "padding-top", 5 )
]
}
type Msg
= Increment
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
{ model | styles = Dict.remove "padding" model.styles }
view : Model -> Html Msg
view model =
let
attrs =
model.styles
|> Dict.map (\k v -> style k (String.fromInt v ++ "px"))
|> Dict.values
in
div []
[ div (style "backgroundColor" "red" :: attrs) []
, button [ onClick Increment ] [ text "Remove one" ]
]
main : Program () Model Msg
main =
Browser.sandbox
{ init = initialModel
, view = view
, update = update
}
Comments:
- this issue can occur for any css that can be built using a composite key, and by sub-keys: margin, background, ...
- Joshua Reusch found that Vue and Angular have the same bug: https://codesandbox.io/s/nostalgic-goldstine-xbfby (vue) https://codesandbox.io/s/silent-glade-ronuo (angular)
- React has special handling https://github.com/facebook/react/blob/b98adb648a27640db8467064e537b238b8c306ce/packages/react-dom/src/shared/CSSShorthandProperty.js
Activity
lydell commentedon Jun 30, 2024
Probably related: elm/html#145