diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/IDE/Canvas_Context_Bug_Fixes.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/IDE/Canvas_Context_Bug_Fixes.js index 5ded3386b1..c4137779c4 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/IDE/Canvas_Context_Bug_Fixes.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/IDE/Canvas_Context_Bug_Fixes.js @@ -20,4 +20,19 @@ describe("Canvas context Property Pane", function() { 2, ); }); + + it("Bug Fix: widget explorer should automatically open on widget selection", () => { + cy.reload(); + cy.CheckAndUnfoldEntityItem("Widgets"); + //check it was originally not expanded + cy.get(`[data-guided-tour-id="explorer-entity-Image1"]`).should( + "not.exist", + ); + + cy.get(".t--widget-imagewidget") + .eq(0) + .click(); + //check if the entities are not expanded + cy.get(`[data-guided-tour-id="explorer-entity-Image1"]`).should("exist"); + }); }); diff --git a/app/client/src/constants/PropertyControlConstants.tsx b/app/client/src/constants/PropertyControlConstants.tsx index 8b53f65e82..6bbf8fbe2d 100644 --- a/app/client/src/constants/PropertyControlConstants.tsx +++ b/app/client/src/constants/PropertyControlConstants.tsx @@ -94,7 +94,7 @@ export type PropertyPaneControlConfig = { postUpdateAction?: ReduxActionType; onBlur?: () => void; onFocus?: () => void; - + isPanelProperty?: boolean; // Numeric Input Control min?: number; }; diff --git a/app/client/src/pages/Editor/Explorer/Entity/index.tsx b/app/client/src/pages/Editor/Explorer/Entity/index.tsx index c6adb94ddc..53c659dfac 100644 --- a/app/client/src/pages/Editor/Explorer/Entity/index.tsx +++ b/app/client/src/pages/Editor/Explorer/Entity/index.tsx @@ -219,6 +219,7 @@ export type EntityProps = { isSticky?: boolean; collapseRef?: RefObject | null; customAddButton?: ReactNode; + forceExpand?: boolean; }; export const Entity = forwardRef( @@ -247,6 +248,10 @@ export const Entity = forwardRef( if (isEntityOpen !== undefined) open(isOpen); }, [props.name]); + useEffect(() => { + if (!!props.forceExpand) open(true); + }, [props.forceExpand]); + /* eslint-enable react-hooks/exhaustive-deps */ const toggleChildren = (e: any) => { props.onToggle && props.onToggle(!isOpen); diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx index c75f5ae319..70d1b3fbd2 100644 --- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx +++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx @@ -85,7 +85,7 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => { const icon = ; const location = useLocation(); - const shouldExpand = widgetsToExpand.includes(props.widgetId); + const forceExpand = widgetsToExpand.includes(props.widgetId); const pagePermissions = useSelector(getPagePermissions); @@ -153,10 +153,10 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => { className="widget" contextMenu={showContextMenu && contextMenu} entityId={props.widgetId} + forceExpand={forceExpand} highlight={lastSelectedWidget === props.widgetId} icon={icon} isDefaultExpanded={ - shouldExpand || (!!props.searchKeyword && !!props.childWidgets) || !!props.isDefaultExpanded } diff --git a/app/client/src/pages/Editor/PropertyPane/Generator.tsx b/app/client/src/pages/Editor/PropertyPane/Generator.tsx index 3309494004..cf113dd5b4 100644 --- a/app/client/src/pages/Editor/PropertyPane/Generator.tsx +++ b/app/client/src/pages/Editor/PropertyPane/Generator.tsx @@ -28,6 +28,7 @@ export type PropertyControlsGeneratorProps = { type: WidgetType; panel: IPanelProps; panelPropertyPath?: string; + isPanelProperty?: boolean; theme: EditorTheme; searchQuery?: string; }; @@ -114,6 +115,7 @@ const generatePropertyControl = ( step={GUIDED_TOUR_STEPS.TABLE_WIDGET_BINDING} > { ); useEffect(() => { + // This is required because layered panels like Column Panel have Animation of 300ms + const focusTimeout = props.isPanelProperty ? 300 : 0; if (shouldFocusPropertyPath) { - // We can get a code editor element as well, which will take time to load - // for that we setTimeout to 200 ms setTimeout(() => { if (shouldFocusOnPropertyControl(controlRef.current)) { const focusableElement = getPropertyControlFocusElement( @@ -124,7 +124,7 @@ const PropertyControl = memo((props: Props) => { }); focusableElement?.focus(); } - }, 0); + }, focusTimeout); } }, [shouldFocusPropertyPath]); /** diff --git a/app/client/src/sagas/NavigationSagas.ts b/app/client/src/sagas/NavigationSagas.ts index 29a9aae557..74badd57c0 100644 --- a/app/client/src/sagas/NavigationSagas.ts +++ b/app/client/src/sagas/NavigationSagas.ts @@ -197,7 +197,10 @@ function* setStateOfPage( focusHistory.state._routingURL !== currPath && isSameBranch(focusHistory.state._paramString, paramString) ) { - history.push(`${focusHistory.state._routingURL}${paramString || ""}`); + history.push( + `${focusHistory.state._routingURL}${focusHistory.state._paramString || + ""}`, + ); } } else { for (const selectorInfo of selectors) {