fix: editor losing focus after toggling a boolean value

josdejong · May 20, 2022 · ea52484 · ea52484
1 parent 42fe818
commit ea52484
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/src/lib/plugins/value/components/BooleanToggle.svelte b/src/lib/plugins/value/components/BooleanToggle.svelte
@@ -4,11 +4,13 @@
   import { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons'
   import { compileJSONPointer } from 'immutable-json-patch'
   import Icon from 'svelte-awesome'
+  import { SELECTION_TYPE } from '../../../logic/selection.js'
 
   export let path
   export let value
   export let readOnly
   export let onPatch
+  export let onSelect
 
   function toggleBooleanValue(event) {
     event.stopPropagation()
@@ -24,6 +26,8 @@
         value: !value
       }
     ])
+
+    onSelect({ type: SELECTION_TYPE.VALUE, path })
   }
 </script>
 

diff --git a/src/lib/plugins/value/renderValue.js b/src/lib/plugins/value/renderValue.js
@@ -27,7 +27,7 @@ export function renderValue({
   if (!isEditing && isBoolean(value)) {
     renderers.push({
       component: BooleanToggle,
-      props: { path, value, readOnly, onPatch }
+      props: { path, value, readOnly, onPatch, onSelect }
     })
   }
 

diff --git a/src/routes/development.svelte b/src/routes/development.svelte
@@ -516,4 +516,8 @@ See https://github.com/sveltejs/kit/issues/981
   label {
     white-space: nowrap;
   }
+
+  :global(.jse-main.jse-focus) {
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
+  }
 </style>