Clojurians Log v2

Where are the slots documented?

And why do you want to keep the slot state in an atom? (I assume you actually mean a ratom.)

What do you mean about where the slots are documented? I wan't to keep them in a ratom because when data change in my state ratom the menu is re-rendered and the slot states is reset.

> What do you mean about where the slots are documented? Well, I meant precisely what I asked. :) Not sure how else to describe it. The Menu component seems to be well documented, but those docs don't mention slots. Or even state. So I have no clue where "state is maintained via slots" comes from, or what a "slot" even means.

Yes, you are right. The DaisyUI documentation does not mention slots. The reason I say slot is because chrome gives me a hint of a slot when I inspect the elements.

I still have no clue what it means. Can you share a screenshot?

and this is what the menu looks like

It's about web components: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot Doesn't really mean that you have to use web components. I really doubt it's necessary for state tracking.

yes, I read that reference. But I didn't get any wiser. I was hoping someone had experience with similar problem.

Their "Collapsible submenu" section in the Menu component documentation shows that they handle it with <details> and an open attribute. I would just try something like

[:details {:open (:open? @state-ratom)}
 ...]

yes, that makes it possible to make it default to open

but I also need to be able to track the change

> yes, that makes it possible to make it default to open It should also be possible to use it to alter the current state - not just the initial one. > but I also need to be able to track the change You mean something like :on-open?

yes, precisely. I have tried :on-change and :on-toggle but I will try :on-open

Wait, that was just for the sake of discussion - that's not what necessarily should work.

yes, I suspected that

How exactly did you use the :on-toggle event handler? There's a discussion about <details> in the React issue tracker, with this being the most interesting comment among the most recent ones: https://github.com/facebook/react/issues/15486#issuecomment-1537155358

(defn menu-folder-item
  [name icon children]
  (let 
    [open? (r/atom false)]
    (fn []
     [:li
      [:details 
       {:open @open? 
        :on-toggle #(reset! open? (not @open?))}

       [:summary
        [:> icon {:class [:size-4]}]
        name]

       (into [:ul] children)]]))) 

Your code works for me just fine. Although I would still follow the advice in the linked comment.

What exactly did not work? In what scenario?

ok, let me do some more tests

I moved the state from a component ratom to a global ratom and now it works. I should have tested if the :on-toggle event was triggered first. Thank you for helping out!

That shouldn't have affected anything. But just in case - if you tried e.g. changing children, and it didn't work, and you thought that's because of that state, then no, it's because you use (fn [] ...) without passing children to the inner function. Also, #(reset! open? (not @open?)) could be written as #(swap! open? not).

actually, now I have a recusive loop

Have you read the comment that I linked?

yes, I will read it again

Yes, now it works! Thanks!