Expand collapsed `Thread` component
Hey!
I'm trying to simulate the collapsed state of this thread, but I don't see any handler that is called when the "Reply" button is clicked.
How should I detect that the user clicked on that button to update `collapsed` to `true`?
Hi @Bernardo Belchior! Good question. Can I double check -- when you say "simulate", are you using this UI component and you're manually controlling the "collapsed" attribute?
Hi, @Jackson Gabbard! Yes, I'd like to collapse the replies by default.
Hi @Bernardo Belchior, I'm double checking with one of the frontend leads on our team. I know you can do this the hard way:
window.addEventListener('click', (e) => {
let t = e.target;
while (t) {
if (t.innerText === 'Reply...') {
let p = t.parentNode;
while (p) {
if (p.nodeName === 'CORD-THREAD') {
p.setAttribute('collapsed', false);
// and/or update your private state here
break;
}
p = p.parentNode;
}
}
t = t.parentNode;
}
});
That's decidedly not a lovely thing to do. But it should work. Let me chase this up internally and see if there's a better solution.
Oh, one follow-up thought -- you could put a click listener on the whole thread. That way if someone clicks anywhere within it, the thread will expand. This is the behaviour we built the <cord-thread /> component to expect, which is why there isn't an event dispatched for the reply link.
Thanks, @Jackson Gabbard. Would it be possible to add a onReplyExpand callback or similar to the Thread component instead?
Adding an event listener as suggested above isn't very React-y.
Hiya @Bernardo Belchior, sorry for the slow response on my end. I'll look into a callback like onExpand. It does feel like it should be there, right? Let me see how quickly we can get this in.
Thanks, @Jackson Gabbard!
Hey, @Jackson Gabbard.
Let me see how quickly we can get this in.
Do you have any insights on this?
Thanks!