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() {
// 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");

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}`;
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-" +

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 { 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<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
// 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) {