From a13a01b0e42beda0ff5403750972f55205a85e2b Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Fri, 4 Nov 2022 12:02:41 -0400
Subject: [PATCH 01/12] Rearrange and add region comments.

---
 dev_app/src/components/Body.tsx | 66 ++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/dev_app/src/components/Body.tsx b/dev_app/src/components/Body.tsx
index 0cbb6d5..69da681 100644
--- a/dev_app/src/components/Body.tsx
+++ b/dev_app/src/components/Body.tsx
@@ -37,6 +37,8 @@ type ReadOnlyCallback = (
 ) => boolean;
 
 function Body() {
+  //region State
+
   const [json, setJson] = useState(_.cloneDeep(defaultJson));
   const [deltaUpdateString, setDeltaUpdateString] = useState("{}");
   const [readOnly, setReadOnly] = useState<boolean | ReadOnlyCallback>(false);
@@ -49,11 +51,36 @@ function Body() {
   const [readOnlyBooleanEnable, setReadOnlyBooleanEnable] = useState(false);
 
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
-  const readOnlyBooleanRef = useRef<HTMLInputElement | null>(null);
-  const readOnlyFunctionRef = useRef<HTMLInputElement | null>(null);
-  const readOnlyRef = useRef<HTMLInputElement | null>(null);
-  const customInputRef = useRef<HTMLInputElement | null>(null);
-  const minusMenuRef = useRef<HTMLInputElement | null>(null);
+
+  //endregion
+  //region Memos
+
+  const style1 = {
+    width: "100%",
+  };
+  const style2 = {
+    verticalAlign: "top",
+  };
+  const style3 = {
+    backgroundColor: "#e0e0e0",
+    border: "1px lightgrey solid",
+  };
+  const style4 = {
+    margin: "0 15px",
+    minWidth: "200px",
+  };
+  const style5 = {
+    backgroundColor: "black",
+    color: "yellow",
+    border: "1px solid green",
+  };
+  const customInputElement = customInput ? <input style={style5} /> : undefined;
+  const minusMenuElement = minusMenu ? (
+    <button type="button">Remove</button>
+  ) : undefined;
+
+  //endregion
+  //region Callbacks
 
   const onFullyUpdate = useCallback((newJson: object) => {
     setGlobalUpdateString(JSON.stringify(newJson, null, 4));
@@ -145,31 +172,8 @@ function Body() {
     setDeltaUpdateString("{}");
   }, []);
 
-  // Render
-
-  const style1 = {
-    width: "100%",
-  };
-  const style2 = {
-    verticalAlign: "top",
-  };
-  const style3 = {
-    backgroundColor: "#e0e0e0",
-    border: "1px lightgrey solid",
-  };
-  const style4 = {
-    margin: "0 15px",
-    minWidth: "200px",
-  };
-  const style5 = {
-    backgroundColor: "black",
-    color: "yellow",
-    border: "1px solid green",
-  };
-  const customInputElement = customInput ? <input style={style5} /> : undefined;
-  const minusMenuElement = minusMenu ? (
-    <button type="button">Remove</button>
-  ) : undefined;
+  //endregion
+  //region Render
 
   return (
     <div>
@@ -287,6 +291,8 @@ function Body() {
       </table>
     </div>
   );
+
+  //endregion
 }
 
 export default Body;

From 528de7c90c6a524a8ad29fa782c4c1556345101f Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Fri, 4 Nov 2022 12:09:26 -0400
Subject: [PATCH 02/12] Rename styles.

---
 dev_app/src/components/Body.tsx | 67 +++++++++++++++++----------------
 1 file changed, 35 insertions(+), 32 deletions(-)

diff --git a/dev_app/src/components/Body.tsx b/dev_app/src/components/Body.tsx
index 69da681..9b07170 100644
--- a/dev_app/src/components/Body.tsx
+++ b/dev_app/src/components/Body.tsx
@@ -10,6 +10,28 @@ import React, { useCallback, useRef, useState } from "react";
 import { JsonTree } from "react-editable-json-tree";
 import { trySetRefAttr } from "../utils/misc";
 
+const styles = {
+  table: {
+    width: "100%",
+  },
+  cell: {
+    verticalAlign: "top",
+  },
+  code: {
+    backgroundColor: "#e0e0e0",
+    border: "1px lightgrey solid",
+  },
+  container: {
+    margin: "0 15px",
+    minWidth: "200px",
+  },
+  customInput: {
+    backgroundColor: "black",
+    color: "yellow",
+    border: "1px solid green",
+  },
+};
+
 const defaultJson = {
   error: new Error("error"),
   func: () => {
@@ -55,26 +77,7 @@ function Body() {
   //endregion
   //region Memos
 
-  const style1 = {
-    width: "100%",
-  };
-  const style2 = {
-    verticalAlign: "top",
-  };
-  const style3 = {
-    backgroundColor: "#e0e0e0",
-    border: "1px lightgrey solid",
-  };
-  const style4 = {
-    margin: "0 15px",
-    minWidth: "200px",
-  };
-  const style5 = {
-    backgroundColor: "black",
-    color: "yellow",
-    border: "1px solid green",
-  };
-  const customInputElement = customInput ? <input style={style5} /> : undefined;
+  const customInputElement = customInput ? <input style={styles.customInput} /> : undefined;
   const minusMenuElement = minusMenu ? (
     <button type="button">Remove</button>
   ) : undefined;
@@ -177,7 +180,7 @@ function Body() {
 
   return (
     <div>
-      <div style={style4}>
+      <div style={styles.container}>
         <span>
           <input
             type="checkbox"
@@ -221,7 +224,7 @@ function Body() {
           Custom minus menu
         </span>
       </div>
-      <table style={style1}>
+      <table style={styles.table}>
         <thead>
           <tr>
             <th>
@@ -250,8 +253,8 @@ function Body() {
         </thead>
         <tbody>
           <tr>
-            <td style={style2}>
-              <div style={style4}>
+            <td style={styles.cell}>
+              <div style={styles.container}>
                 <JsonTree
                   data={json}
                   onFullyUpdate={onFullyUpdate}
@@ -263,18 +266,18 @@ function Body() {
                 />
               </div>
             </td>
-            <td style={style2}>
-              <div style={style4}>
-                <pre style={style3}>{globalUpdateString}</pre>
+            <td style={styles.cell}>
+              <div style={styles.container}>
+                <pre style={styles.code}>{globalUpdateString}</pre>
               </div>
             </td>
-            <td style={style2}>
-              <div style={style4}>
-                <pre style={style3}>{deltaUpdateString}</pre>
+            <td style={styles.cell}>
+              <div style={styles.container}>
+                <pre style={styles.code}>{deltaUpdateString}</pre>
               </div>
             </td>
-            <td style={style2}>
-              <div style={style4}>
+            <td style={styles.cell}>
+              <div style={styles.container}>
                 <textarea ref={textareaRef} rows={15} cols={40} />
                 <div>
                   <button type="button" onClick={handleSubmit}>

From 22133a99b053d4001da864efa0c4479d18333ba7 Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Mon, 7 Nov 2022 14:05:47 -0500
Subject: [PATCH 03/12] Don't use refs so often. Make read-only function
 checkbox work.

---
 dev_app/src/components/Body.tsx | 96 ++++++++++++---------------------
 1 file changed, 33 insertions(+), 63 deletions(-)

diff --git a/dev_app/src/components/Body.tsx b/dev_app/src/components/Body.tsx
index 9b07170..4dea132 100644
--- a/dev_app/src/components/Body.tsx
+++ b/dev_app/src/components/Body.tsx
@@ -5,10 +5,9 @@
  */
 
 import _ from "lodash";
-import React, { useCallback, useRef, useState } from "react";
+import React, { ChangeEvent, useCallback, useRef, useState } from "react";
 // @ts-ignore
 import { JsonTree } from "react-editable-json-tree";
-import { trySetRefAttr } from "../utils/misc";
 
 const styles = {
   table: {
@@ -49,7 +48,7 @@ const defaultJson = {
     int: 100,
     boolean: true,
   },
-  array: [1, 2, 3, { string: "test" }],
+  array: [1, 2, 3, { string: "test" }]
 };
 
 type ReadOnlyCallback = (
@@ -63,22 +62,22 @@ function Body() {
 
   const [json, setJson] = useState(_.cloneDeep(defaultJson));
   const [deltaUpdateString, setDeltaUpdateString] = useState("{}");
-  const [readOnly, setReadOnly] = useState<boolean | ReadOnlyCallback>(false);
+  const [readOnlyTreeProp, setReadOnlyTreeProp] = useState<boolean | (() => ReadOnlyCallback)>(false);
   const [globalUpdateString, setGlobalUpdateString] = useState("{}");
-  const [customInput, setCustomInput] = useState(false);
-  const [minusMenu, setMinusMenu] = useState(false);
 
-  const [readOnlyEnable, setReadOnlyEnable] = useState(false);
-  const [readOnlyFunctionEnable, setReadOnlyFunctionEnable] = useState(false);
-  const [readOnlyBooleanEnable, setReadOnlyBooleanEnable] = useState(false);
+  const [checkedCustomInput, setCheckedCustomInput] = useState(false);
+  const [checkedMinusMenu, setCheckedMinusMenu] = useState(false);
+  const [checkedReadOnly, setCheckedReadOnly] = useState(false);
+  const [checkedReadOnlyFunction, setCheckedReadOnlyFunction] = useState(false);
+  const [checkedReadOnlyBoolean, setCheckedReadOnlyBoolean] = useState(false);
 
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   //endregion
   //region Memos
 
-  const customInputElement = customInput ? <input style={styles.customInput} /> : undefined;
-  const minusMenuElement = minusMenu ? (
+  const customInputElement = checkedCustomInput ? <input style={styles.customInput} /> : undefined;
+  const minusMenuElement = checkedMinusMenu ? (
     <button type="button">Remove</button>
   ) : undefined;
 
@@ -93,12 +92,10 @@ function Body() {
     setDeltaUpdateString(JSON.stringify(deltaUpdate, null, 4));
   }, []);
 
-  const handleChangeMinusMenu = useCallback(() => {
-    setMinusMenu(minusMenuRef.current?.checked ?? false);
-  }, []);
-
-  const handleChangeCustomInput = useCallback(() => {
-    setCustomInput(customInputRef.current?.checked ?? false);
+  const handleCheck = useCallback((setter: React.Dispatch<React.SetStateAction<boolean>>) => {
+    return (event: ChangeEvent<HTMLInputElement>) => {
+      setter(event.target.checked);
+    };
   }, []);
 
   const handleSubmit = useCallback(() => {
@@ -123,47 +120,25 @@ function Body() {
     setJson(_.cloneDeep(defaultJson));
   }, []);
 
-  const handleChangeReadOnlyBoolean = useCallback(() => {
-    trySetRefAttr(readOnlyFunctionRef, {
-      disabled: readOnlyBooleanRef.current?.checked ?? false,
-    });
-    setReadOnly(
-      (prevState: any) => readOnlyBooleanRef.current?.checked ?? prevState
-    );
+  const handleChangeReadOnly = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setCheckedReadOnly(event.target.checked);
+    if (!event.target.checked) setReadOnlyTreeProp(false);
   }, []);
 
-  const handleChangeReadOnlyFunction = useCallback(() => {
-    trySetRefAttr(readOnlyBooleanRef, {
-      disabled: readOnlyFunctionRef.current?.checked ?? false,
-    });
-
-    let result: ReadOnlyCallback;
-    if (readOnlyFunctionRef.current?.checked) {
-      result = (name, value, keyPath) => keyPath[keyPath.length - 1] === "text";
-    } else {
-      result = () => false;
-    }
-
-    setReadOnly(result);
+  const handleChangeReadOnlyBoolean = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setCheckedReadOnlyBoolean(event.target.checked);
+    setReadOnlyTreeProp(event.target.checked);
   }, []);
 
-  const handleChangeReadOnly = useCallback(() => {
-    const checkbox = readOnlyRef.current;
-    if (!checkbox) return;
-    setReadOnlyEnable(checkbox.checked);
-
-    if (checkbox.checked) {
-      trySetRefAttr(readOnlyBooleanRef, { disabled: false });
-      trySetRefAttr(readOnlyFunctionRef, { disabled: false });
-      if (readOnlyBooleanRef.current?.checked) {
-        handleChangeReadOnlyBoolean();
-      } else if (readOnlyFunctionRef.current?.checked) {
-        handleChangeReadOnlyFunction();
-      }
+  const handleChangeReadOnlyFunction = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setCheckedReadOnlyFunction(event.target.checked);
+    if (event.target.checked) {
+      setReadOnlyTreeProp(
+        (): ReadOnlyCallback =>
+          (name, value, keyPath) => keyPath[keyPath.length - 1] === "text"
+      );
     } else {
-      trySetRefAttr(readOnlyBooleanRef, { disabled: true });
-      trySetRefAttr(readOnlyFunctionRef, { disabled: true });
-      setReadOnly(false);
+      setReadOnlyTreeProp((): ReadOnlyCallback => () => false);
     }
   }, []);
 
@@ -184,7 +159,6 @@ function Body() {
         <span>
           <input
             type="checkbox"
-            ref={readOnlyRef}
             onChange={handleChangeReadOnly}
           />
           Read Only
@@ -192,34 +166,30 @@ function Body() {
         <span>
           <input
             type="checkbox"
-            ref={readOnlyBooleanRef}
             onChange={handleChangeReadOnlyBoolean}
-            disabled
+            disabled={!checkedReadOnly || checkedReadOnlyFunction}
           />
           Read Only Boolean
         </span>
         <span>
           <input
             type="checkbox"
-            ref={readOnlyFunctionRef}
             onChange={handleChangeReadOnlyFunction}
-            disabled
+            disabled={!checkedReadOnly || checkedReadOnlyBoolean}
           />
           Read Only Function (read only for all &apos;text&apos; key)
         </span>
         <span>
           <input
             type="checkbox"
-            ref={customInputRef}
-            onChange={handleChangeCustomInput}
+            onChange={handleCheck(setCheckedCustomInput)}
           />
           Custom input
         </span>
         <span>
           <input
             type="checkbox"
-            ref={minusMenuRef}
-            onChange={handleChangeMinusMenu}
+            onChange={handleCheck(setCheckedMinusMenu)}
           />
           Custom minus menu
         </span>
@@ -259,7 +229,7 @@ function Body() {
                   data={json}
                   onFullyUpdate={onFullyUpdate}
                   onDeltaUpdate={onDeltaUpdate}
-                  readOnly={readOnly}
+                  readOnly={readOnlyTreeProp}
                   inputElement={customInputElement}
                   minusMenuElement={minusMenuElement}
                   logger={console}

From 087bf5327d8def0f357ea26d424e34fad4274bc7 Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Mon, 7 Nov 2022 14:09:50 -0500
Subject: [PATCH 04/12] Reformat with prettier.

---
 dev_app/src/components/Body.tsx | 80 ++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 35 deletions(-)

diff --git a/dev_app/src/components/Body.tsx b/dev_app/src/components/Body.tsx
index 4dea132..d650ce7 100644
--- a/dev_app/src/components/Body.tsx
+++ b/dev_app/src/components/Body.tsx
@@ -48,7 +48,7 @@ const defaultJson = {
     int: 100,
     boolean: true,
   },
-  array: [1, 2, 3, { string: "test" }]
+  array: [1, 2, 3, { string: "test" }],
 };
 
 type ReadOnlyCallback = (
@@ -62,7 +62,9 @@ function Body() {
 
   const [json, setJson] = useState(_.cloneDeep(defaultJson));
   const [deltaUpdateString, setDeltaUpdateString] = useState("{}");
-  const [readOnlyTreeProp, setReadOnlyTreeProp] = useState<boolean | (() => ReadOnlyCallback)>(false);
+  const [readOnlyTreeProp, setReadOnlyTreeProp] = useState<
+    boolean | (() => ReadOnlyCallback)
+  >(false);
   const [globalUpdateString, setGlobalUpdateString] = useState("{}");
 
   const [checkedCustomInput, setCheckedCustomInput] = useState(false);
@@ -76,7 +78,9 @@ function Body() {
   //endregion
   //region Memos
 
-  const customInputElement = checkedCustomInput ? <input style={styles.customInput} /> : undefined;
+  const customInputElement = checkedCustomInput ? (
+    <input style={styles.customInput} />
+  ) : undefined;
   const minusMenuElement = checkedMinusMenu ? (
     <button type="button">Remove</button>
   ) : undefined;
@@ -92,11 +96,14 @@ function Body() {
     setDeltaUpdateString(JSON.stringify(deltaUpdate, null, 4));
   }, []);
 
-  const handleCheck = useCallback((setter: React.Dispatch<React.SetStateAction<boolean>>) => {
-    return (event: ChangeEvent<HTMLInputElement>) => {
-      setter(event.target.checked);
-    };
-  }, []);
+  const handleCheck = useCallback(
+    (setter: React.Dispatch<React.SetStateAction<boolean>>) => {
+      return (event: ChangeEvent<HTMLInputElement>) => {
+        setter(event.target.checked);
+      };
+    },
+    []
+  );
 
   const handleSubmit = useCallback(() => {
     if (!textareaRef.current) return;
@@ -120,27 +127,36 @@ function Body() {
     setJson(_.cloneDeep(defaultJson));
   }, []);
 
-  const handleChangeReadOnly = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setCheckedReadOnly(event.target.checked);
-    if (!event.target.checked) setReadOnlyTreeProp(false);
-  }, []);
+  const handleChangeReadOnly = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setCheckedReadOnly(event.target.checked);
+      if (!event.target.checked) setReadOnlyTreeProp(false);
+    },
+    []
+  );
 
-  const handleChangeReadOnlyBoolean = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setCheckedReadOnlyBoolean(event.target.checked);
-    setReadOnlyTreeProp(event.target.checked);
-  }, []);
+  const handleChangeReadOnlyBoolean = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setCheckedReadOnlyBoolean(event.target.checked);
+      setReadOnlyTreeProp(event.target.checked);
+    },
+    []
+  );
 
-  const handleChangeReadOnlyFunction = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setCheckedReadOnlyFunction(event.target.checked);
-    if (event.target.checked) {
-      setReadOnlyTreeProp(
-        (): ReadOnlyCallback =>
-          (name, value, keyPath) => keyPath[keyPath.length - 1] === "text"
-      );
-    } else {
-      setReadOnlyTreeProp((): ReadOnlyCallback => () => false);
-    }
-  }, []);
+  const handleChangeReadOnlyFunction = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setCheckedReadOnlyFunction(event.target.checked);
+      if (event.target.checked) {
+        setReadOnlyTreeProp(
+          (): ReadOnlyCallback => (name, value, keyPath) =>
+            keyPath[keyPath.length - 1] === "text"
+        );
+      } else {
+        setReadOnlyTreeProp((): ReadOnlyCallback => () => false);
+      }
+    },
+    []
+  );
 
   const handleClearGlobalUpdateString = useCallback(() => {
     setGlobalUpdateString("{}");
@@ -157,10 +173,7 @@ function Body() {
     <div>
       <div style={styles.container}>
         <span>
-          <input
-            type="checkbox"
-            onChange={handleChangeReadOnly}
-          />
+          <input type="checkbox" onChange={handleChangeReadOnly} />
           Read Only
         </span>
         <span>
@@ -187,10 +200,7 @@ function Body() {
           Custom input
         </span>
         <span>
-          <input
-            type="checkbox"
-            onChange={handleCheck(setCheckedMinusMenu)}
-          />
+          <input type="checkbox" onChange={handleCheck(setCheckedMinusMenu)} />
           Custom minus menu
         </span>
       </div>

From 036308fe5641207e1642f73401a1fa7e3a705eb5 Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Mon, 7 Nov 2022 14:10:02 -0500
Subject: [PATCH 05/12] Delete unused `trySetRefAttr`.

---
 dev_app/src/utils/misc.ts | 10 ----------
 1 file changed, 10 deletions(-)
 delete mode 100644 dev_app/src/utils/misc.ts

diff --git a/dev_app/src/utils/misc.ts b/dev_app/src/utils/misc.ts
deleted file mode 100644
index e703472..0000000
--- a/dev_app/src/utils/misc.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { RefObject } from "react";
-
-// eslint-disable-next-line import/prefer-default-export
-export function trySetRefAttr<RefType>(
-  ref: RefObject<RefType>,
-  changes: Partial<RefType>
-) {
-  if (!ref.current) return;
-  Object.assign(ref.current, changes);
-}

From 174549c3094e613f366af060321d3432b3a382df Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Mon, 7 Nov 2022 14:16:45 -0500
Subject: [PATCH 06/12] Remove eslint disable comment.

---
 dev_app/src/components/Body.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/dev_app/src/components/Body.tsx b/dev_app/src/components/Body.tsx
index d650ce7..1d312fc 100644
--- a/dev_app/src/components/Body.tsx
+++ b/dev_app/src/components/Body.tsx
@@ -34,7 +34,6 @@ const styles = {
 const defaultJson = {
   error: new Error("error"),
   func: () => {
-    // eslint-disable-next-line no-console
     console.log("test");
   },
   text: "text",

From 467ac36fcb807ec3f2efca50c052f68d0becd1b5 Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Mon, 7 Nov 2022 16:10:56 -0500
Subject: [PATCH 07/12] Fix readOnly's sub-inputs not being reapplied when
 changing readOnly.

---
 dev_app/src/components/Body.tsx | 45 +++++++++++++++++++++++----------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/dev_app/src/components/Body.tsx b/dev_app/src/components/Body.tsx
index 1d312fc..8085604 100644
--- a/dev_app/src/components/Body.tsx
+++ b/dev_app/src/components/Body.tsx
@@ -126,35 +126,54 @@ function Body() {
     setJson(_.cloneDeep(defaultJson));
   }, []);
 
+  const setReadOnlyTreePropWithBoolean = useCallback((newValue: boolean) => {
+    setReadOnlyTreeProp(newValue);
+  }, []);
+
+  const setReadOnlyTreePropWithFunction = useCallback((newValue: boolean) => {
+    if (newValue) {
+      setReadOnlyTreeProp(
+        (): ReadOnlyCallback => (name, value, keyPath) =>
+          keyPath[keyPath.length - 1] === "text"
+      );
+    } else {
+      setReadOnlyTreeProp((): ReadOnlyCallback => () => false);
+    }
+  }, []);
+
   const handleChangeReadOnly = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       setCheckedReadOnly(event.target.checked);
-      if (!event.target.checked) setReadOnlyTreeProp(false);
+      if (!event.target.checked) {
+        setReadOnlyTreeProp(false);
+      } else {
+        // Reapply the "child" readonly fields
+        if (checkedReadOnlyBoolean) setReadOnlyTreePropWithBoolean(true);
+        else if (checkedReadOnlyFunction) setReadOnlyTreePropWithFunction(true);
+      }
     },
-    []
+    [
+      checkedReadOnlyBoolean,
+      checkedReadOnlyFunction,
+      setReadOnlyTreePropWithBoolean,
+      setReadOnlyTreePropWithFunction,
+    ]
   );
 
   const handleChangeReadOnlyBoolean = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       setCheckedReadOnlyBoolean(event.target.checked);
-      setReadOnlyTreeProp(event.target.checked);
+      setReadOnlyTreePropWithBoolean(event.target.checked);
     },
-    []
+    [setReadOnlyTreePropWithBoolean]
   );
 
   const handleChangeReadOnlyFunction = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       setCheckedReadOnlyFunction(event.target.checked);
-      if (event.target.checked) {
-        setReadOnlyTreeProp(
-          (): ReadOnlyCallback => (name, value, keyPath) =>
-            keyPath[keyPath.length - 1] === "text"
-        );
-      } else {
-        setReadOnlyTreeProp((): ReadOnlyCallback => () => false);
-      }
+      setReadOnlyTreePropWithFunction(event.target.checked);
     },
-    []
+    [setReadOnlyTreePropWithFunction]
   );
 
   const handleClearGlobalUpdateString = useCallback(() => {

From fc23bbaaf538e28f1807183f2afefc73033db41c Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Wed, 9 Nov 2022 20:09:06 -0500
Subject: [PATCH 08/12] Fix incorrect type.

---
 dev_app/src/components/Body.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dev_app/src/components/Body.tsx b/dev_app/src/components/Body.tsx
index 8085604..37c9ddd 100644
--- a/dev_app/src/components/Body.tsx
+++ b/dev_app/src/components/Body.tsx
@@ -53,7 +53,7 @@ const defaultJson = {
 type ReadOnlyCallback = (
   name: string,
   value: unknown,
-  keyPath: string
+  keyPath: string[]
 ) => boolean;
 
 function Body() {

From b2f0b1bcaca0c4f1799bf477e830cc5ce1c0cd12 Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Wed, 9 Nov 2022 20:09:52 -0500
Subject: [PATCH 09/12] Freeze `keyPath` so it cannot be mutated by the user.

---
 src/components/JsonArray.js         | 3 +++
 src/components/JsonFunctionValue.js | 3 +++
 src/components/JsonObject.js        | 3 +++
 src/components/JsonValue.js         | 3 +++
 4 files changed, 12 insertions(+)

diff --git a/src/components/JsonArray.js b/src/components/JsonArray.js
index ffc4f03..206b449 100644
--- a/src/components/JsonArray.js
+++ b/src/components/JsonArray.js
@@ -56,10 +56,13 @@ const defaultProps = {
 class JsonArray extends Component {
     constructor(props) {
         super(props);
+
         const keyPath = [
             ...props.keyPath,
             props.name,
         ];
+        Object.freeze(keyPath);
+
         this.state = {
             data: props.data,
             name: props.name,
diff --git a/src/components/JsonFunctionValue.js b/src/components/JsonFunctionValue.js
index 6ec1083..9ff04cf 100644
--- a/src/components/JsonFunctionValue.js
+++ b/src/components/JsonFunctionValue.js
@@ -52,10 +52,13 @@ const defaultProps = {
 class JsonFunctionValue extends Component {
     constructor(props) {
         super(props);
+
         const keyPath = [
             ...props.keyPath,
             props.name,
         ];
+        Object.freeze(keyPath);
+
         this.state = {
             value: props.value,
             name: props.name,
diff --git a/src/components/JsonObject.js b/src/components/JsonObject.js
index 42952ed..7a6dba8 100644
--- a/src/components/JsonObject.js
+++ b/src/components/JsonObject.js
@@ -56,10 +56,13 @@ const defaultProps = {
 class JsonObject extends Component {
     constructor(props) {
         super(props);
+
         const keyPath = (props.deep === -1) ? [] : [
             ...props.keyPath,
             props.name,
         ];
+        Object.freeze(keyPath);
+
         this.state = {
             name: props.name,
             data: props.data,
diff --git a/src/components/JsonValue.js b/src/components/JsonValue.js
index e991105..1f0cc87 100644
--- a/src/components/JsonValue.js
+++ b/src/components/JsonValue.js
@@ -50,10 +50,13 @@ const defaultProps = {
 class JsonValue extends Component {
     constructor(props) {
         super(props);
+
         const keyPath = [
             ...props.keyPath,
             props.name,
         ];
+        Object.freeze(keyPath);
+
         this.state = {
             value: props.value,
             name: props.name,

From ef333ecd993a8e69456aca587b41765b39c291a1 Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Wed, 9 Nov 2022 20:15:49 -0500
Subject: [PATCH 10/12] Add info about 2.3.1.

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a39a19..39349b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 2.3.1
+## Fix
+- `keyPath`, the `string[]` argument in many callback functions, is now frozen, so mistakenly trying to mutate it will throw an error
+- Fixed `dev_app`'s read-only function checkbox throwing an error
+- Cleaned up checkbox logic in `dev_app` (no longer uses unnecessary refs)
+
 # 2.3.0
 ## Feature
 - Support for React 17 and 18

From 220f6d7a364f67476cb673159642b264c2994fd9 Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Thu, 10 Nov 2022 13:40:03 -0500
Subject: [PATCH 11/12] Add info about attaching refs to `inputElement`.

---
 CHANGELOG.md | 1 +
 README.md    | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 39349b7..e047894 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - `keyPath`, the `string[]` argument in many callback functions, is now frozen, so mistakenly trying to mutate it will throw an error
 - Fixed `dev_app`'s read-only function checkbox throwing an error
 - Cleaned up checkbox logic in `dev_app` (no longer uses unnecessary refs)
+- Add documentation about when refs must be attachable
 
 # 2.3.0
 ## Feature
diff --git a/README.md b/README.md
index 6c8e936..5d53f52 100644
--- a/README.md
+++ b/README.md
@@ -246,9 +246,9 @@ The library will add an `onClick` handler to the element.
 
 ### inputElement
 
-|     Key      |                 Description                 |                  Type                    | Required |                            Default                             |
-| :----------: | :-----------------------------------------: | :--------------------------------------: | :------: | :------------------------------------------------------------: |
-| inputElement | Custom text input element (to edit a value) | <code>JSX.Element &#124; Function</code> |  False   | `(usage, keyPath, deep, keyName, data, dataType) => <input />` |
+|     Key      |                                                                                                                    Description                                                                                                                    |                  Type                    | Required |                            Default                             |
+| :----------: |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:| :--------------------------------------: | :------: | :------------------------------------------------------------: |
+| inputElement | Custom input element to edit a value which may be of any JSON type. It must be able to have a ref attached to it. If it's a custom element (not a DOM element), you need to use [ref forwarding](https://reactjs.org/docs/forwarding-refs.html).  | <code>JSX.Element &#124; Function</code> |  False   | `(usage, keyPath, deep, keyName, data, dataType) => <input />` |
 
 The library will add a `placeholder`, `ref`, and `defaultValue` prop to the
 element. This element will be focused when possible.

From 6874581c6e505442ad81898655e8cc23533e3344 Mon Sep 17 00:00:00 2001
From: Phanabani <phanabani@gmail.com>
Date: Thu, 10 Nov 2022 13:52:41 -0500
Subject: [PATCH 12/12] Clarify the refs info and move it to a Docs section.

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e047894..d904562 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,9 @@
 - `keyPath`, the `string[]` argument in many callback functions, is now frozen, so mistakenly trying to mutate it will throw an error
 - Fixed `dev_app`'s read-only function checkbox throwing an error
 - Cleaned up checkbox logic in `dev_app` (no longer uses unnecessary refs)
-- Add documentation about when refs must be attachable
+
+## Docs
+- Add info about how refs must be attachable to `inputElement`
 
 # 2.3.0
 ## Feature