replicant icon indicating copy to clipboard operation
replicant copied to clipboard

Literal id is removed when using unmounting style

Open PEZ opened this issue 1 year ago • 0 comments

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.

PEZ avatar Aug 16 '24 15:08 PEZ