fix(choicefield): enable popover only on editing

snek-at · Sep 8, 2021 · 4ee9231 · 4ee9231
1 parent 7dc6c5c
commit 4ee9231
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/examples/my-gatsby-site/src/templates/SamplePage.tsx b/examples/my-gatsby-site/src/templates/SamplePage.tsx
@@ -32,7 +32,7 @@ const SamplePage: JaenTemplate = () => {
         <h1>ChoiceField</h1>
         <fields.ChoiceField
           fieldName="choiceField"
-          initValue="a"
+          initValue="a" // optional
           options={['a', 'b', 'c', 'd']}
           onRenderPopover={(selection, options, select) => (
             <>

diff --git a/packages/jaen-pages/src/containers/fields/ChoiceField/index.tsx b/packages/jaen-pages/src/containers/fields/ChoiceField/index.tsx
@@ -52,6 +52,8 @@ const ChoiceField: React.FC<ChoiceFieldProps> = ({
   const register = () => dispatch(registerPageField({pageId, field}))
   const unregister = () => dispatch(unregisterPageField({pageId, field}))
 
+  const isEditing = useAppSelector(state => state.options.isEditing)
+
   const updatedValue = (useAppSelector(
     pageFieldContentSelector(pageId, fieldName, block)
   ) as ChoiceBlock | undefined)?.option
@@ -107,6 +109,10 @@ const ChoiceField: React.FC<ChoiceFieldProps> = ({
     }
   }
 
+  if (!isEditing) {
+    return onRender(selection)
+  }
+
   return (
     <ChakraProvider>
       <Popover trigger="hover">