Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Property pane search input focus (#18858)

Browse Source
This commit is contained in:
Aswath K 2022-12-15 16:25:52 +05:30 committed by GitHub
parent a83bfc8acd
commit c72f865962
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/PropertyPane/PropertyPane_Search_spec.ts
View File

@ -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() {
// it("1. Verify if the search Input is getting focused when a widget is selected", function() { ee.SelectEntityByName("Table1", "Widgets");
// ee.SelectEntityByName("Table1", "Widgets");
// // Initially the search input will only be soft focused // Initially the search input will only be soft focused
// // We need to press Enter to properly focus it // We need to press Enter to properly focus it
// agHelper.PressEnter(); agHelper.AssertElementFocus(propPane._propertyPaneSearchInputWrapper);
// agHelper.AssertElementFocus(propPane._propertyPaneSearchInput); agHelper.PressEnter();
agHelper.AssertElementFocus(propPane._propertyPaneSearchInput);
// // Pressing Escape should soft focus the search input // Pressing Escape should soft focus the search input
// agHelper.PressEscape(); agHelper.PressEscape();
// agHelper.AssertElementFocus(propPane._propertyPaneSearchInput, false); 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() { it("2. Search for Properties", function() {
ee.SelectEntityByName("Table1", "Widgets");
// Search for a property inside content tab // Search for a property inside content tab
propPane.Search("visible"); propPane.Search("visible");
propPane.AssertIfPropertyOrSectionExists("general", "CONTENT", "visible"); propPane.AssertIfPropertyOrSectionExists("general", "CONTENT", "visible");

3
app/client/cypress/support/Pages/PropertyPane.ts
View File

@ -46,7 +46,8 @@ export class PropertyPane {
`.t--property-pane-section-collapse-${section} .t--property-section-tag-${tab}`; `.t--property-pane-section-collapse-${section} .t--property-section-tag-${tab}`;
private _propertyControl = (property: string) => private _propertyControl = (property: string) =>
`.t--property-control-${property}`; `.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"; _propertyPaneEmptySearchResult = ".t--property-pane-no-search-results";
_propertyToggle = (controlToToggle: string) => _propertyToggle = (controlToToggle: string) =>
".t--property-control-" + ".t--property-control-" +

56
app/client/src/pages/Editor/PropertyPane/PropertyPaneSearchInput.tsx
View File

@ -3,12 +3,12 @@ import styled from "styled-components";
import { SearchVariant } from "design-system"; import { SearchVariant } from "design-system";
import { InputWrapper, SearchInput } from "design-system"; import { InputWrapper, SearchInput } from "design-system";
import { Colors } from "constants/Colors"; import { Colors } from "constants/Colors";
// import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
// import { import {
// getShouldFocusPanelPropertySearch, getShouldFocusPanelPropertySearch,
// getShouldFocusPropertySearch, getShouldFocusPropertySearch,
// } from "selectors/propertyPaneSelectors"; } from "selectors/propertyPaneSelectors";
// import { isCurrentFocusOnInput } from "utils/editorContextUtils"; import { isCurrentFocusOnInput } from "utils/editorContextUtils";
import { PROPERTY_SEARCH_INPUT_PLACEHOLDER } from "@appsmith/constants/messages"; import { PROPERTY_SEARCH_INPUT_PLACEHOLDER } from "@appsmith/constants/messages";
const SearchInputWrapper = styled.div` const SearchInputWrapper = styled.div`
@ -37,28 +37,30 @@ type PropertyPaneSearchInputProps = {
export function PropertyPaneSearchInput(props: PropertyPaneSearchInputProps) { export function PropertyPaneSearchInput(props: PropertyPaneSearchInputProps) {
const wrapperRef = useRef<HTMLDivElement>(null); const wrapperRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLDivElement>(null); const inputRef = useRef<HTMLDivElement>(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 useEffect(() => {
// const shouldFocusSearch = useSelector(getShouldFocusPropertySearch); // Checks if the property pane opened not because of focusing an input inside a widget
// const shouldFocusPanelSearch = useSelector(getShouldFocusPanelPropertySearch); const isActiveFocusNotFromWidgetInput = !isCurrentFocusOnInput();
if (
// useEffect(() => { shouldFocusSearch &&
// // Checks if the property pane opened not because of focusing an input inside a widget isActiveFocusNotFromWidgetInput &&
// // The same functionality is being used for context preservation. Need to check if we can piggy back on that. // while the panel transition happens, focus will be happening twice. Once on the main pane and then on the panel
// const isActiveFocusNotFromWidgetInput = !isCurrentFocusOnInput(); // The following check will make sure that the focus is only done once and prevents the UI jittering
// if (shouldFocusSearch && isActiveFocusNotFromWidgetInput) { isPanel === shouldFocusPanelSearch
// if (!props.isPanel && !shouldFocusPanelSearch) { ) {
// setTimeout(() => { setTimeout(
// wrapperRef.current?.focus(); () => {
// }); wrapperRef.current?.focus();
// } else if (props.isPanel && shouldFocusPanelSearch) { },
// // Layered panels like Column Panel's transition takes 300ms // Layered panels like Column Panel's transition takes 300ms.
// setTimeout(() => { // To avoid UI jittering, we are delaying the focus by 300ms.
// wrapperRef.current?.focus(); isPanel ? 300 : 0,
// }, 300); );
// } }
// } }, [shouldFocusSearch, shouldFocusPanelSearch, isPanel]);
// }, [shouldFocusSearch, shouldFocusPanelSearch, props.isPanel]);
const handleInputKeydown = useCallback((e: KeyboardEvent) => { const handleInputKeydown = useCallback((e: KeyboardEvent) => {
switch (e.key) { switch (e.key) {