From b12babbcd91e25a0e579326d0b8f3ddcd8f3173f Mon Sep 17 00:00:00 2001
From: lucataglia <luca.tagliabue@radicalbit.io>
Date: Fri, 19 May 2023 18:16:39 +0200
Subject: [PATCH] handle very first render

---
 packages/react-json-tree/src/expandableButtons.tsx | 14 +++++++++-----
 packages/react-json-tree/src/index.tsx             |  4 +---
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/react-json-tree/src/expandableButtons.tsx b/packages/react-json-tree/src/expandableButtons.tsx
index a4e4818d..ed9f9856 100644
--- a/packages/react-json-tree/src/expandableButtons.tsx
+++ b/packages/react-json-tree/src/expandableButtons.tsx
@@ -5,7 +5,6 @@ import { Expandable } from '.';
 
 interface Props {
   expandable?: Expandable;
-  expandableDefaultValue?: 'expand' | 'collapse';
   shouldExpandNode?: 'expand' | 'collapse' | 'default';
   setShouldExpandNode: any;
 }
@@ -31,7 +30,6 @@ interface DefaultButtonProps {
 
 function ExpandableButtons({ 
   expandable,
-  expandableDefaultValue,
   setShouldExpandNode,
   shouldExpandNode
  }: Props){
@@ -39,13 +37,15 @@ function ExpandableButtons({
         return <></>
     }
 
+    const expandableDefaultValue = expandable?.defaultValue || 'expand'
+
     return (
       <div style={{position: 'absolute', display: 'flex', justifyContent:'center', alignItems: 'center', gap:'1rem', top: '1rem', right: '1rem', cursor: 'pointer'}}>
         <DefaultButton
           defaultIcon={expandable?.defaultIcon}
           setShouldExpandNode={setShouldExpandNode}
         />
-        
+
         <ExpandButton
           expandableDefaultValue={expandableDefaultValue}
           expandIcon={expandable?.expandIcon}
@@ -66,7 +66,9 @@ function ExpandableButtons({
 function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, setShouldExpandNode }: ExpandButtonProps) {
     const onExpand = () => setShouldExpandNode('expand');
   
-    if (shouldExpandNode === 'collapse' || (shouldExpandNode === 'default' && expandableDefaultValue === 'collapse')) {
+    const isDefault = !shouldExpandNode ||shouldExpandNode === 'default'
+
+    if (shouldExpandNode === 'collapse' || (isDefault && expandableDefaultValue === 'collapse')) {
       return (
         <div role="presentation" onClick={onExpand}>
           {expandIcon || <FontAwesomeIcon icon={faArrowRight} />}
@@ -80,7 +82,9 @@ function ExpandButton({ expandableDefaultValue, expandIcon, shouldExpandNode, se
   function CollapseButton({ expandableDefaultValue, collapseIcon, shouldExpandNode, setShouldExpandNode }: CollapseButtonProps) {
     const onCollapse = () => setShouldExpandNode('collapse');
   
-    if (shouldExpandNode === 'expand' ||(shouldExpandNode === 'default' && expandableDefaultValue === 'expand')) {
+    const isDefault = !shouldExpandNode ||shouldExpandNode === 'default'
+
+    if (shouldExpandNode === 'expand' ||(isDefault && expandableDefaultValue === 'expand')) {
       return (
         <div role="presentation" onClick={onCollapse}>
           {collapseIcon || <FontAwesomeIcon icon={faArrowDown} />}
diff --git a/packages/react-json-tree/src/index.tsx b/packages/react-json-tree/src/index.tsx
index f3df0b66..77458611 100644
--- a/packages/react-json-tree/src/index.tsx
+++ b/packages/react-json-tree/src/index.tsx
@@ -58,8 +58,7 @@ export function JSONTree({
   collectionLimit = 50,
   sortObjectKeys = false,
 }: Props) {
-  const expandableDefaultValue = expandable?.defaultValue || 'expand'
-  const [shouldExpandNode, setShouldExpandNode] = useState(expandableDefaultValue);
+  const [shouldExpandNode, setShouldExpandNode] = useState();
 
   const styling = useMemo(
     () =>
@@ -87,7 +86,6 @@ export function JSONTree({
 
       <ExpandableButtons 
         expandable={expandable}
-        expandableDefaultValue={expandableDefaultValue}
         shouldExpandNode={shouldExpandNode}
         setShouldExpandNode={setShouldExpandNode}
       />