replicant
replicant copied to clipboard
Literal id is removed when using unmounting style
While the :replicant/unmounting style is applied the element gets stripped of it's id attribute. But only if it is a “literal” id, i.e. on the element keyword, like :div#foo.
So, with this CSS:
#banner {
position: absolute;
left: 0;
right: 0;
padding: 10px;
background: lightblue;
}
And this hiccup:
(defn banner-view [{:ui/keys [banner-text]}]
[:div#banner {:style {:top 0
:transition "top 0.25s"}
:replicant/mounting {:style {:top "-100px"}}
:replicant/unmounting {:style {:top "-100px"}}}
[:p banner-text]
[:button {:on {:click [[:ui/dismiss-banner]]}} "Dismiss"]])
During the transition the banner id is removed and this the element is not positioned as it should.
This works fine, though:
(defn banner-view [{:ui/keys [banner-text]}]
[:div {:id "banner"
:style {:top 0
:transition "top 0.25s"}
:replicant/mounting {:style {:top "-100px"}}
:replicant/unmounting {:style {:top "-100px"}}}
[:p banner-text]
[:button {:on {:click [[:ui/dismiss-banner]]}} "Dismiss"]])
If you agree this is a bug, I'd love to have a stab at fixing it.