Child component gets rendered outside of parent, being moved to bottom of HTML body about purescript-halogen

[farzadbekran]

I think I had a similar issue to this, where I was rendering one of two slot components, based on some input to the parent component. Something like this:

  render :: State -> H.ComponentHTML Action ChildSlots m
  render { loginType } =
    case loginType of
      Just (ULC.UL _) -> HH.slot (Proxy :: _ "passwordSlot") unit Pass.form
        unit
        HandlePass
      Just (ULC.Cell cell) -> HH.slot (Proxy :: _ "verificationSlot") unit Ver.form
        cell
        HandleCode
      Nothing -> HH.slot (Proxy :: _ "userloginOrCellSlot") unit ULC.form unit
        HandleULOrCell

which after some interactions and state changes in the parent, which caused the rendered child slot to switch, if I changed the route, (from login page to home page for example), the new page's HTML would be added to the document, but the child slot from the old page would not be removed. I solved it by wrapping the child slots inside a div like this:

  render { loginType } =
    HH.div_
      [ case loginType of
          Just (ULC.UL _) -> HH.slot (Proxy :: _ "passwordSlot") unit Pass.form
            unit
            HandlePass
          Just (ULC.Cell cell) -> HH.slot (Proxy :: _ "verificationSlot") unit
            Ver.form
            cell
            HandleCode
          Nothing -> HH.slot (Proxy :: _ "userloginOrCellSlot") unit ULC.form
            unit
            HandleULOrCell
      ]

My guess is that when a component is to be removed from the document, halogen's diffing algorithm somehow looks for the root node of the component which is to be removed and since it has changed completely (not the same root when it was mounted), it can't find it and the child components remain in the DOM.

So I suggest you wrap your rendered slots inside a div and see if it changes anything for you:

render: \state -> HH.div_ 
  [case state of
      Left a -> html a
      Right a -> slot _nil unit h a Raise]

Not sure if my situation is the same as yours, but I think it's worth a try. Let me know if it works, because I'm not sure if my thinking is correct. If it is, I think it would count as a bug.

[abigailalice]

I tried wrapping my render functions in a div like the workaround suggested, and it does seem like that fixed it. Thanks.

[garyb]

It's definitely a bug! I thought I'd tagged this issue as such, or that possibly it's a duplicate of another actually, as I've definitely heard about this problem before (using a slot directly inside render causing problems). I think about it quite often, but haven't gotten around to dedicating some time to figuring out how exactly it's going wrong.

[thomashoneyman]

as I've definitely heard about this problem before (using a slot directly inside render causing problems).

It comes up somewhat often — for example, just a few days ago:
thomashoneyman/purescript-halogen-store#17

(the halogen-store connect component is a higher-order component that just renders a slot directly)

And perhaps it relates to this?
#748

[garyb]

Thanks for the links 👍, I knew it definitely happened in relation to -store as that's where I remember hearing about it first, but you could well be right that it's related to the other thing with memoized too.

[garyb]

The other issues that are probably this are #766 and #657