Merge branch 'main' into develop

.version

@@ -1 +1 @@
-0.12.1
+0.12.2

frontend/src/Editor/Components/DropDown.jsx

@@ -27,14 +27,18 @@ export const DropDown = function DropDown({ height, validate, properties, styles
   }, [isValid]);
 
   useEffect(() => {
-    setCurrentValue(value);
-    setExposedVariable('value', value);
+    let newValue = undefined;
+    if (values?.includes(value)) newValue = value;
+
+    setCurrentValue(newValue);
+    setExposedVariable('value', newValue);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
   useEffect(() => {
     let newValue = undefined;
-    if (values?.includes(value)) newValue = value;
+    if (values?.includes(currentValue)) newValue = currentValue;
+    else if (values?.includes(value)) newValue = value;
 
     setCurrentValue(newValue);
     setExposedVariable('value', newValue);

frontend/src/Editor/Components/Image.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import LazyLoad from 'react-lazyload';
 
-export const Image = function Image({ height, properties, styles }) {
+export const Image = function Image({ height, properties, styles, fireEvent }) {
   const source = properties.source;
   const widgetVisibility = styles.visibility ?? true;
 
@@ -12,7 +12,7 @@ export const Image = function Image({ height, properties, styles }) {
   return (
     <div data-disabled={styles.disabledState} style={{ display: widgetVisibility ? '' : 'none' }}>
       <LazyLoad height={height} placeholder={<Placeholder />} debounce={500}>
-        <img src={source} height={height} />
+        <img src={source} height={height} onClick={() => fireEvent('onClick')} />
       </LazyLoad>
     </div>
   );

frontend/src/Editor/Container.jsx

@@ -48,7 +48,7 @@ export const Container = ({
   const styles = {
     width: currentLayout === 'mobile' ? deviceWindowWidth : '100%',
     height: 2400,
-    maxWidth: '1292px',
+    maxWidth: `${canvasWidth}px`,
     position: 'absolute',
     backgroundSize: `${canvasWidth / 43}px 10px`,
   };