diff --git a/frontend/src/Editor/Components/Image.jsx b/frontend/src/Editor/Components/Image.jsx index 4dd0f73e2c..95fcf4f693 100644 --- a/frontend/src/Editor/Components/Image.jsx +++ b/frontend/src/Editor/Components/Image.jsx @@ -2,9 +2,13 @@ import React, { useRef, useEffect, useState } from 'react'; import LazyLoad from 'react-lazyload'; import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'; -export const Image = function Image({ height, properties, styles, fireEvent, width }) { +export const Image = function Image({ component, height, properties, styles, fireEvent, width }) { const { source, loadingState, alternativeText, zoomButtons } = properties; const { visibility, disabledState, borderType, backgroundColor, padding, imageFit } = styles; + const { + definition: { events }, + } = component; + const hasOnClickEvent = events.some((event) => event.eventId === 'onClick'); const widgetVisibility = visibility ?? true; const imageRef = useRef(null); const [imageOffset, setImageOffset] = useState(0); @@ -60,6 +64,8 @@ export const Image = function Image({ height, properties, styles, fireEvent, wid backgroundColor, padding: Number.parseInt(padding), objectFit: imageFit ? imageFit : 'contain', + cursor: hasOnClickEvent ? 'pointer' : 'inherit', + pointerEvents: 'auto', }} height={height} onClick={() => fireEvent('onClick')}