fix: Scrolling not working on iframe in preview mode (#22798)

Fixes #22799

Fix bug : Scrolling an iFrame not working in preview mode.

Test Plan:

1. DnD an iFrame onto Canvas.
2. Make sure iFrame is scrollable.
3. Switch to preview mode.
4. Ensure iFrame is scrollable.
5. Deploy the app.
6. Ensure the iFrame is scrollable in deployed mode as well.

## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
This commit is contained in:
Rajat Agrawal 2023-05-03 15:37:28 +05:30 committed by GitHub
parent 0e23dfcbf8
commit b2d678a71a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -9,6 +9,7 @@ import { getAppMode } from "@appsmith/selectors/applicationSelectors";
import { APP_MODE } from "entities/App";
import type { RenderMode } from "constants/WidgetConstants";
import { getAppsmithConfigs } from "@appsmith/configs";
import { previewModeSelector } from "selectors/editorSelectors";
interface IframeContainerProps {
borderColor?: string;
@ -134,6 +135,7 @@ function IframeComponent(props: IframeComponentProps) {
}, [srcDoc]);
const appMode = useSelector(getAppMode);
const isPreviewMode = useSelector(previewModeSelector);
const selectedWidget = useSelector(getWidgetPropsForPropertyPane);
return (
@ -144,9 +146,9 @@ function IframeComponent(props: IframeComponentProps) {
borderWidth={borderWidth}
boxShadow={props.boxShadow}
>
{appMode === APP_MODE.EDIT && widgetId !== selectedWidget?.widgetId && (
<OverlayDiv />
)}
{appMode === APP_MODE.EDIT &&
!isPreviewMode &&
widgetId !== selectedWidget?.widgetId && <OverlayDiv />}
{message ? (
message