Limit the collapse/expand functionality to the arrow buttons instead of the whole line

[ealvarez-sw]

It's a bit annoying when you add a new key to an object, click on the text box and the whole object collapses/expands.

I think the easiest way to solve this is to limit the collapse/expand functionality to the left arrows.

REC-20250226181413.mp4

[CarlosNZ]

Okay, I see the problem. Interestingly, extending the clickable area was actually added from a user request, so there are pros and cons to a larger click area: #118

But in this case, you shouldn't be able to click when editing the key input, so I'll definitely fix that -- it appears to be a layering issue.

As for the how large the clickable area should be in general? Maybe an option? I'll have a think.

[ealvarez-sw]

Perhaps the clickable area to expand/collapse should be the arrow and the node name (I think it should also include the area of the number of items label).

Also, I've seen in my current implementation (I'm using preact, don't know if this could be the root cause) but when I try to collapse using the arrow, it chains the click of the arrow along with the click on the row, so it collapses and expands at the same time. I can only collapse it properly by clicking in other zones. I think it could be as simple as using a preventDefault on the arrow click to prevent the click being propagated to the root.

Screen.Recording.2025-02-27.at.10.04.59.mov

[CarlosNZ]

Okay, I've done a quick fix for the immediate issue of clicking through the input field -- it was just a simple missing .stopPropogation(), and that's available now in v1.23.1: https://www.npmjs.com/package/json-edit-react/v/1.23.1

Also, I've seen in my current implementation (I'm using preact, don't know if this could be the root cause) but when I try to collapse using the arrow, it chains the click of the arrow along with the click on the row, so it collapses and expands at the same time. I

Interesting, I can't reproduce this one -- perhaps it is Preact? I don't suppose you can be bothered firing up an online sandbox of some kind (e.g. https://codesandbox.io/p/sandbox/json-edit-react-demo-g5qlym?file=%2Fsrc%2FApp.js%3A11%2C5) where you can demonstrate the problem?

Perhaps the clickable area to expand/collapse should be the arrow and the node name (I think it should also include the area of the number of items label).

I'm planning to make the clickable zones optional -- you'll be able to select from any combination of the "Left side area", the "Node Name" and the whole "Header row" (currently the side area and header row are clickable). Perhaps configuring those more to your liking will also fix the incorrect collapse? I'll try and do that in the next week or so.

[ealvarez-sw]

I've created this sandbox where you can see the problem: https://codesandbox.io/p/sandbox/preact-json-editor-2-s49jns
It's a basic setup, but the issue appears.

Thanks for your help!

[CarlosNZ]

Just wondering, have you tried using the React compatibility layer (preact/compat)? I think this would probably solve the collapsing problem.

I've narrowed the problem down to the collapsed value returned from the useCollapseTransistion hook in my component -- the value is getting to false immediately after setting it to true. But I'm afraid I don't know enough about how Preact works to really know what's going on.

But yes, it's definitely just a Preact thing, it's fine when running in regular React.

[ealvarez-sw]

I've tried, but I cannot install it due to an incompatibility with some of my other dependencies. I'll try to fix it with the new events once they're released

[CarlosNZ]

Closing now as fixing Preact-specific issues beyond the scope of the current functionality. If anyone with more knowledge of Preact would like to have a go at addressing this problem, please go ahead.

@ealvarez-sw Hopfully you can get it working well enough with the latest version (I commented about the latest beta to try out in another issue)