diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/PropertyPane/PropertyPane_Search_spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/PropertyPane/PropertyPane_Search_spec.ts index ac2a3ec8c3..515c126dfb 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/PropertyPane/PropertyPane_Search_spec.ts +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/PropertyPane/PropertyPane_Search_spec.ts @@ -11,22 +11,34 @@ describe("Property Pane Search", function() { }); }); - // TODO(aswathkk): Fix /ClientSideTests/IDE/Canvas_Context_Property_Pane_spec.js and uncomment this - // it("1. Verify if the search Input is getting focused when a widget is selected", function() { - // ee.SelectEntityByName("Table1", "Widgets"); + it("1. Verify if the search Input is getting focused when a widget is selected", function() { + ee.SelectEntityByName("Table1", "Widgets"); - // // Initially the search input will only be soft focused - // // We need to press Enter to properly focus it - // agHelper.PressEnter(); - // agHelper.AssertElementFocus(propPane._propertyPaneSearchInput); + // Initially the search input will only be soft focused + // We need to press Enter to properly focus it + agHelper.AssertElementFocus(propPane._propertyPaneSearchInputWrapper); + agHelper.PressEnter(); + agHelper.AssertElementFocus(propPane._propertyPaneSearchInput); - // // Pressing Escape should soft focus the search input - // agHelper.PressEscape(); - // agHelper.AssertElementFocus(propPane._propertyPaneSearchInput, false); - // }); + // Pressing Escape should soft focus the search input + agHelper.PressEscape(); + agHelper.AssertElementFocus(propPane._propertyPaneSearchInputWrapper); + + // Opening a panel should focus the search input + propPane.OpenTableColumnSettings("name"); + agHelper.AssertElementFocus(propPane._propertyPaneSearchInputWrapper); + + // Opening some other widget and then going back to the initial widget should soft focus the search input that is inside a panel + ee.SelectEntityByName("Switch1", "Widgets"); + ee.SelectEntityByName("Table1", "Widgets"); + agHelper.AssertElementFocus(propPane._propertyPaneSearchInputWrapper); + + // Going out of the panel should soft focus the search input + propPane.NavigateBackToPropertyPane(); + agHelper.AssertElementFocus(propPane._propertyPaneSearchInputWrapper); + }); it("2. Search for Properties", function() { - ee.SelectEntityByName("Table1", "Widgets"); // Search for a property inside content tab propPane.Search("visible"); propPane.AssertIfPropertyOrSectionExists("general", "CONTENT", "visible"); diff --git a/app/client/cypress/support/Pages/PropertyPane.ts b/app/client/cypress/support/Pages/PropertyPane.ts index 099c969e29..19e8737764 100644 --- a/app/client/cypress/support/Pages/PropertyPane.ts +++ b/app/client/cypress/support/Pages/PropertyPane.ts @@ -46,7 +46,8 @@ export class PropertyPane { `.t--property-pane-section-collapse-${section} .t--property-section-tag-${tab}`; private _propertyControl = (property: string) => `.t--property-control-${property}`; - _propertyPaneSearchInput = ".t--property-pane-search-input-wrapper input"; + _propertyPaneSearchInputWrapper = ".t--property-pane-search-input-wrapper"; + _propertyPaneSearchInput = `${this._propertyPaneSearchInputWrapper} input`; _propertyPaneEmptySearchResult = ".t--property-pane-no-search-results"; _propertyToggle = (controlToToggle: string) => ".t--property-control-" + diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyPaneSearchInput.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyPaneSearchInput.tsx index 0a9ccf12d4..86a98c772c 100644 --- a/app/client/src/pages/Editor/PropertyPane/PropertyPaneSearchInput.tsx +++ b/app/client/src/pages/Editor/PropertyPane/PropertyPaneSearchInput.tsx @@ -3,12 +3,12 @@ import styled from "styled-components"; import { SearchVariant } from "design-system"; import { InputWrapper, SearchInput } from "design-system"; import { Colors } from "constants/Colors"; -// import { useSelector } from "react-redux"; -// import { -// getShouldFocusPanelPropertySearch, -// getShouldFocusPropertySearch, -// } from "selectors/propertyPaneSelectors"; -// import { isCurrentFocusOnInput } from "utils/editorContextUtils"; +import { useSelector } from "react-redux"; +import { + getShouldFocusPanelPropertySearch, + getShouldFocusPropertySearch, +} from "selectors/propertyPaneSelectors"; +import { isCurrentFocusOnInput } from "utils/editorContextUtils"; import { PROPERTY_SEARCH_INPUT_PLACEHOLDER } from "@appsmith/constants/messages"; const SearchInputWrapper = styled.div` @@ -37,28 +37,30 @@ type PropertyPaneSearchInputProps = { export function PropertyPaneSearchInput(props: PropertyPaneSearchInputProps) { const wrapperRef = useRef(null); const inputRef = useRef(null); + const shouldFocusSearch = useSelector(getShouldFocusPropertySearch); + const shouldFocusPanelSearch = useSelector(getShouldFocusPanelPropertySearch); + const isPanel = !!props.isPanel; - // TODO(aswathkk): Fix /ClientSideTests/IDE/Canvas_Context_Property_Pane_spec.js and uncomment this - // const shouldFocusSearch = useSelector(getShouldFocusPropertySearch); - // const shouldFocusPanelSearch = useSelector(getShouldFocusPanelPropertySearch); - - // useEffect(() => { - // // Checks if the property pane opened not because of focusing an input inside a widget - // // The same functionality is being used for context preservation. Need to check if we can piggy back on that. - // const isActiveFocusNotFromWidgetInput = !isCurrentFocusOnInput(); - // if (shouldFocusSearch && isActiveFocusNotFromWidgetInput) { - // if (!props.isPanel && !shouldFocusPanelSearch) { - // setTimeout(() => { - // wrapperRef.current?.focus(); - // }); - // } else if (props.isPanel && shouldFocusPanelSearch) { - // // Layered panels like Column Panel's transition takes 300ms - // setTimeout(() => { - // wrapperRef.current?.focus(); - // }, 300); - // } - // } - // }, [shouldFocusSearch, shouldFocusPanelSearch, props.isPanel]); + useEffect(() => { + // Checks if the property pane opened not because of focusing an input inside a widget + const isActiveFocusNotFromWidgetInput = !isCurrentFocusOnInput(); + if ( + shouldFocusSearch && + isActiveFocusNotFromWidgetInput && + // while the panel transition happens, focus will be happening twice. Once on the main pane and then on the panel + // The following check will make sure that the focus is only done once and prevents the UI jittering + isPanel === shouldFocusPanelSearch + ) { + setTimeout( + () => { + wrapperRef.current?.focus(); + }, + // Layered panels like Column Panel's transition takes 300ms. + // To avoid UI jittering, we are delaying the focus by 300ms. + isPanel ? 300 : 0, + ); + } + }, [shouldFocusSearch, shouldFocusPanelSearch, isPanel]); const handleInputKeydown = useCallback((e: KeyboardEvent) => { switch (e.key) {