From 0d84b9753f055a3421d5e53a54edd0819aaee463 Mon Sep 17 00:00:00 2001 From: Ankur Singhal Date: Thu, 24 Mar 2022 03:33:27 +0530 Subject: [PATCH 01/14] added keyboard interaction for datepicker --- .../components/ads/DatePickerComponent.tsx | 78 ++++++++++++++++++- 1 file changed, 76 insertions(+), 2 deletions(-) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index e9cde36d92..fbb8764b35 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useRef, useState } from "react"; import { DateInput, TimePrecision } from "@blueprintjs/datetime"; import styled from "constants/DefaultTheme"; import { Classes } from "./common"; @@ -22,6 +22,14 @@ const StyledDateInput = styled(DateInput)` } } + button, + select, + [tabindex]:not([tabindex="-1"]) { + &:focus { + outline: rgba(19, 124, 189, 0.6) auto 2px !important; + } + } + .${Classes.DATE_PICKER_OVARLAY} { background-color: ${(props) => props.theme.colors.propertyPane.radioGroupBg}; @@ -101,19 +109,85 @@ interface DatePickerComponentProps { parseDate?: (dateStr: string) => Date | null; } +function getKeyboardFocusableElements(element: HTMLDivElement) { + return [ + ...element.querySelectorAll( + 'button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])', + ), + ].filter( + (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden"), + ); +} + function DatePickerComponent(props: DatePickerComponentProps) { + const [isDatePickerVisible, setDatePickerVisibility] = useState(false); + + const popoverRef = useRef(null); + const inputRef = useRef(null); + + function handleDateInputClick() { + setDatePickerVisibility(true); + } + + function handleKeydown(e: KeyboardEvent) { + if (document.activeElement === inputRef.current) { + if (e.key === "Enter") { + setDatePickerVisibility(true); + } else if (e.key === "Escape") { + setDatePickerVisibility(false); + } else if (e.key === "Tab") { + const popoverElement = popoverRef.current; + if (popoverElement) { + e.preventDefault(); + const focusableElements = getKeyboardFocusableElements( + popoverElement, + ); + const firstElement = focusableElements[0]; + if (firstElement) { + (firstElement as any)?.focus(); + } + } + } + } + } + + useEffect(() => { + document.body.addEventListener("keydown", handleKeydown); + return () => { + document.body.removeEventListener("keydown", handleKeydown); + }; + }, []); + + function handleOnDayClick() { + setDatePickerVisibility(false); + } + + function handleInteraction(nextOpenState: boolean) { + setDatePickerVisibility(nextOpenState); + } + return ( Date: Fri, 25 Mar 2022 03:35:21 +0530 Subject: [PATCH 02/14] added escape when picker is focused --- .../src/components/ads/DatePickerComponent.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index fbb8764b35..818850da2d 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -148,6 +148,22 @@ function DatePickerComponent(props: DatePickerComponentProps) { } } } + } else { + const popoverElement = popoverRef.current; + if (popoverElement) { + const focusableElements = getKeyboardFocusableElements(popoverElement); + if ( + focusableElements.some( + (element) => document.activeElement === element, + ) + ) { + if (e.key === "Escape") { + e.preventDefault(); + e.stopPropagation(); + setDatePickerVisibility(false); + } + } + } } } From 75a3e9262a514593c22fcae860b6fbfb60a1352b Mon Sep 17 00:00:00 2001 From: Ankur Singhal Date: Wed, 30 Mar 2022 18:46:48 +0530 Subject: [PATCH 03/14] close picker on pressing enter on time fields --- app/client/src/components/ads/DatePickerComponent.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index 818850da2d..beccc1033f 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -182,6 +182,13 @@ function DatePickerComponent(props: DatePickerComponentProps) { setDatePickerVisibility(nextOpenState); } + function handleTimePickerKeydown(e: React.KeyboardEvent) { + if (e.key === "Enter") { + setDatePickerVisibility(false); + e.stopPropagation(); + } + } + return ( From d7db15cb600979da9bfd9da0fa14b47e529ae2ba Mon Sep 17 00:00:00 2001 From: Ankur Singhal Date: Thu, 31 Mar 2022 22:28:05 +0530 Subject: [PATCH 04/14] added manual click handlers for bottom bar --- .../components/ads/DatePickerComponent.tsx | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index beccc1033f..fac3c1be19 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -26,7 +26,7 @@ const StyledDateInput = styled(DateInput)` select, [tabindex]:not([tabindex="-1"]) { &:focus { - outline: rgba(19, 124, 189, 0.6) auto 2px !important; + outline: #6eb9f0 auto 2px !important; } } @@ -167,10 +167,30 @@ function DatePickerComponent(props: DatePickerComponentProps) { } } + function handleDocumentClick(e: Event) { + if (popoverRef.current) { + if (popoverRef.current.contains(e.target as Node)) { + const $footerBar = popoverRef.current.querySelector( + ".bp3-datepicker-footer", + ); + if ($footerBar) { + const $buttons = Array.from( + $footerBar.querySelectorAll("button.bp3-button"), + ); + if ($buttons.some((button) => button.contains(e.target as Node))) { + setDatePickerVisibility(false); + } + } + } + } + } + useEffect(() => { document.body.addEventListener("keydown", handleKeydown); + document.addEventListener("click", handleDocumentClick); return () => { document.body.removeEventListener("keydown", handleKeydown); + document.removeEventListener("click", handleDocumentClick); }; }, []); From 102a7f3c047fe4fd76d1c3b74264c5a7a2a4a030 Mon Sep 17 00:00:00 2001 From: Ankur Singhal Date: Fri, 1 Apr 2022 04:37:12 +0530 Subject: [PATCH 05/14] toggle on pressing enter --- app/client/src/components/ads/DatePickerComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index fac3c1be19..9512c52ffc 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -132,7 +132,7 @@ function DatePickerComponent(props: DatePickerComponentProps) { function handleKeydown(e: KeyboardEvent) { if (document.activeElement === inputRef.current) { if (e.key === "Enter") { - setDatePickerVisibility(true); + setDatePickerVisibility((value) => !value); } else if (e.key === "Escape") { setDatePickerVisibility(false); } else if (e.key === "Tab") { From 26c1c373f930a12785b88e3a3be954be4a1118a3 Mon Sep 17 00:00:00 2001 From: Ankur Singhal Date: Mon, 4 Apr 2022 18:51:18 +0530 Subject: [PATCH 06/14] added input focus color and focus back to input after date selection --- app/client/src/components/ads/DatePickerComponent.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index 9512c52ffc..70c154e3e6 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -22,6 +22,10 @@ const StyledDateInput = styled(DateInput)` } } + .bp3-input-group input:focus { + border-color: var(--appsmith-color-black-900); + } + button, select, [tabindex]:not([tabindex="-1"]) { @@ -123,7 +127,7 @@ function DatePickerComponent(props: DatePickerComponentProps) { const [isDatePickerVisible, setDatePickerVisibility] = useState(false); const popoverRef = useRef(null); - const inputRef = useRef(null); + const inputRef = useRef(null); function handleDateInputClick() { setDatePickerVisibility(true); @@ -196,16 +200,21 @@ function DatePickerComponent(props: DatePickerComponentProps) { function handleOnDayClick() { setDatePickerVisibility(false); + inputRef.current?.focus(); } function handleInteraction(nextOpenState: boolean) { setDatePickerVisibility(nextOpenState); + if (!nextOpenState) { + inputRef.current?.focus(); + } } function handleTimePickerKeydown(e: React.KeyboardEvent) { if (e.key === "Enter") { setDatePickerVisibility(false); e.stopPropagation(); + inputRef.current?.focus(); } } From 9ea3f5005f5165b2061ab99d54f0d94532fdfd03 Mon Sep 17 00:00:00 2001 From: Ankur Singhal Date: Wed, 6 Apr 2022 13:53:25 +0530 Subject: [PATCH 07/14] we can now cycle through all internal controls of Datepicker on pressing tab --- .../components/ads/DatePickerComponent.tsx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index 70c154e3e6..6ceb988c1d 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -126,6 +126,11 @@ function getKeyboardFocusableElements(element: HTMLDivElement) { function DatePickerComponent(props: DatePickerComponentProps) { const [isDatePickerVisible, setDatePickerVisibility] = useState(false); + const DatePickerVisibilityRef = useRef(isDatePickerVisible); + DatePickerVisibilityRef.current = isDatePickerVisible; + + const clearButtonText = "Clear"; + const popoverRef = useRef(null); const inputRef = useRef(null); @@ -167,6 +172,27 @@ function DatePickerComponent(props: DatePickerComponentProps) { setDatePickerVisibility(false); } } + + if (DatePickerVisibilityRef.current) { + const focusableElements = getKeyboardFocusableElements( + popoverElement, + ); + const lastFocusedElement = focusableElements.find( + (element) => document.activeElement === element, + ); + if (lastFocusedElement) { + if ( + lastFocusedElement.nodeName === "BUTTON" && + lastFocusedElement.className === "bp3-button bp3-minimal" && + (lastFocusedElement as HTMLElement).innerText === clearButtonText + ) { + const firstElement = focusableElements[0]; + if (firstElement) { + (firstElement as HTMLElement).focus(); + } + } + } + } } } } @@ -221,6 +247,7 @@ function DatePickerComponent(props: DatePickerComponentProps) { return ( Date: Wed, 6 Apr 2022 14:26:18 +0530 Subject: [PATCH 08/14] increased the height and added vertical padding like other controls --- app/client/src/components/ads/DatePickerComponent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index 6ceb988c1d..805c816adc 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -12,8 +12,8 @@ const StyledDateInput = styled(DateInput)` props.theme.colors.propertyPane.buttonText}; border: 1px solid ${Colors.ALTO2}; border-radius: 0; - padding: 0px 8px; - height: 32px; + padding: 6px 8px; + height: 36px; box-shadow: none; &:focus { From 6bd7b07747c671df39a26b1ad803741bbe3abdd3 Mon Sep 17 00:00:00 2001 From: Ankur Singhal Date: Thu, 7 Apr 2022 17:44:45 +0530 Subject: [PATCH 09/14] cycling back through controls with shift+tab is also working --- .../components/ads/DatePickerComponent.tsx | 51 +++++++++++++++---- 1 file changed, 41 insertions(+), 10 deletions(-) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index 805c816adc..a7595362a5 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -123,6 +123,17 @@ function getKeyboardFocusableElements(element: HTMLDivElement) { ); } +function whetherItIsTheLastButtonInDatepicker( + element: HTMLElement, + buttonText: string, +) { + return ( + element.nodeName === "BUTTON" && + element.className === "bp3-button bp3-minimal" && + element.innerText === buttonText + ); +} + function DatePickerComponent(props: DatePickerComponentProps) { const [isDatePickerVisible, setDatePickerVisibility] = useState(false); @@ -177,18 +188,38 @@ function DatePickerComponent(props: DatePickerComponentProps) { const focusableElements = getKeyboardFocusableElements( popoverElement, ); - const lastFocusedElement = focusableElements.find( - (element) => document.activeElement === element, - ); - if (lastFocusedElement) { + if (e.shiftKey) { + const lastFocusedElementIndex = focusableElements.findIndex( + (element) => document.activeElement === element, + ); if ( - lastFocusedElement.nodeName === "BUTTON" && - lastFocusedElement.className === "bp3-button bp3-minimal" && - (lastFocusedElement as HTMLElement).innerText === clearButtonText + lastFocusedElementIndex === 1 || + lastFocusedElementIndex === 0 ) { - const firstElement = focusableElements[0]; - if (firstElement) { - (firstElement as HTMLElement).focus(); + const lastFocusableElement = focusableElements.find((element) => + whetherItIsTheLastButtonInDatepicker( + element as HTMLElement, + clearButtonText, + ), + ); + if (lastFocusableElement) { + (lastFocusableElement as HTMLElement).focus(); + e.preventDefault(); + } + } + } else { + const lastFocusedElement = focusableElements.find( + (element) => document.activeElement === element, + ); + if (lastFocusedElement) { + if ( + whetherItIsTheLastButtonInDatepicker( + lastFocusedElement as HTMLElement, + clearButtonText, + ) + ) { + (focusableElements[0] as HTMLElement).focus(); + e.preventDefault(); } } } From 28859aa84484d1aab08fdfbbe0be09188e5fd4d4 Mon Sep 17 00:00:00 2001 From: Ankur Singhal Date: Thu, 7 Apr 2022 17:45:02 +0530 Subject: [PATCH 10/14] cycling back through controls with shift+tab is also working --- app/client/src/components/ads/DatePickerComponent.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index a7595362a5..ff0a1fb5bb 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -137,9 +137,12 @@ function whetherItIsTheLastButtonInDatepicker( function DatePickerComponent(props: DatePickerComponentProps) { const [isDatePickerVisible, setDatePickerVisibility] = useState(false); + // to get the latest visibility value const DatePickerVisibilityRef = useRef(isDatePickerVisible); DatePickerVisibilityRef.current = isDatePickerVisible; + // this was added to check the Datepickers + // footer action bar last Clear button const clearButtonText = "Clear"; const popoverRef = useRef(null); From ba24c9736b1870be33c51162216eaed19709b968 Mon Sep 17 00:00:00 2001 From: Ankur Singhal Date: Thu, 7 Apr 2022 17:54:17 +0530 Subject: [PATCH 11/14] abstracted out the keyboard navigation behavior in a separate hook --- .../components/ads/DatePickerComponent.tsx | 37 ++++++++++++++++--- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index ff0a1fb5bb..b6888fe0d9 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -134,17 +134,13 @@ function whetherItIsTheLastButtonInDatepicker( ); } -function DatePickerComponent(props: DatePickerComponentProps) { +function useKeyboardNavigation(clearButtonText: string) { const [isDatePickerVisible, setDatePickerVisibility] = useState(false); // to get the latest visibility value const DatePickerVisibilityRef = useRef(isDatePickerVisible); DatePickerVisibilityRef.current = isDatePickerVisible; - // this was added to check the Datepickers - // footer action bar last Clear button - const clearButtonText = "Clear"; - const popoverRef = useRef(null); const inputRef = useRef(null); @@ -278,6 +274,37 @@ function DatePickerComponent(props: DatePickerComponentProps) { } } + return { + // state + isDatePickerVisible, + + // references + inputRef, + popoverRef, + + // event handlers + handleTimePickerKeydown, + handleOnDayClick, + handleDateInputClick, + handleInteraction, + }; +} + +function DatePickerComponent(props: DatePickerComponentProps) { + // this was added to check the Datepickers + // footer action bar last Clear button + const clearButtonText = "Clear"; + + const { + handleDateInputClick, + handleInteraction, + handleOnDayClick, + handleTimePickerKeydown, + inputRef, + isDatePickerVisible, + popoverRef, + } = useKeyboardNavigation(clearButtonText); + return ( Date: Thu, 7 Apr 2022 19:34:55 +0530 Subject: [PATCH 12/14] fixed the first movement on shift --- .../components/ads/DatePickerComponent.tsx | 60 ++++++++++--------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index b6888fe0d9..438160d9f3 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -187,38 +187,40 @@ function useKeyboardNavigation(clearButtonText: string) { const focusableElements = getKeyboardFocusableElements( popoverElement, ); - if (e.shiftKey) { - const lastFocusedElementIndex = focusableElements.findIndex( - (element) => document.activeElement === element, - ); - if ( - lastFocusedElementIndex === 1 || - lastFocusedElementIndex === 0 - ) { - const lastFocusableElement = focusableElements.find((element) => - whetherItIsTheLastButtonInDatepicker( - element as HTMLElement, - clearButtonText, - ), + if (e.key === "Tab") { + if (e.shiftKey) { + const lastFocusedElementIndex = focusableElements.findIndex( + (element) => document.activeElement === element, ); - if (lastFocusableElement) { - (lastFocusableElement as HTMLElement).focus(); - e.preventDefault(); - } - } - } else { - const lastFocusedElement = focusableElements.find( - (element) => document.activeElement === element, - ); - if (lastFocusedElement) { if ( - whetherItIsTheLastButtonInDatepicker( - lastFocusedElement as HTMLElement, - clearButtonText, - ) + lastFocusedElementIndex === 1 || + lastFocusedElementIndex === 0 ) { - (focusableElements[0] as HTMLElement).focus(); - e.preventDefault(); + const lastFocusableElement = focusableElements.find((element) => + whetherItIsTheLastButtonInDatepicker( + element as HTMLElement, + clearButtonText, + ), + ); + if (lastFocusableElement) { + (lastFocusableElement as HTMLElement).focus(); + e.preventDefault(); + } + } + } else { + const lastFocusedElement = focusableElements.find( + (element) => document.activeElement === element, + ); + if (lastFocusedElement) { + if ( + whetherItIsTheLastButtonInDatepicker( + lastFocusedElement as HTMLElement, + clearButtonText, + ) + ) { + (focusableElements[0] as HTMLElement).focus(); + e.preventDefault(); + } } } } From 47d219cc908a55635f2e6aa2b82b2c9f40fbe26e Mon Sep 17 00:00:00 2001 From: Ankur Singhal Date: Thu, 28 Apr 2022 16:36:18 +0530 Subject: [PATCH 13/14] removed day click and clear click which was crfeating the ambiguity --- .../components/ads/DatePickerComponent.tsx | 40 ++----------------- 1 file changed, 4 insertions(+), 36 deletions(-) diff --git a/app/client/src/components/ads/DatePickerComponent.tsx b/app/client/src/components/ads/DatePickerComponent.tsx index 438160d9f3..eab135c208 100644 --- a/app/client/src/components/ads/DatePickerComponent.tsx +++ b/app/client/src/components/ads/DatePickerComponent.tsx @@ -170,20 +170,16 @@ function useKeyboardNavigation(clearButtonText: string) { } else { const popoverElement = popoverRef.current; if (popoverElement) { - const focusableElements = getKeyboardFocusableElements(popoverElement); - if ( - focusableElements.some( - (element) => document.activeElement === element, - ) - ) { + if (DatePickerVisibilityRef.current) { + // if datepicker is visible on pressing + // escape hide it and put focus back to input if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); setDatePickerVisibility(false); + inputRef.current?.focus(); } - } - if (DatePickerVisibilityRef.current) { const focusableElements = getKeyboardFocusableElements( popoverElement, ); @@ -229,38 +225,13 @@ function useKeyboardNavigation(clearButtonText: string) { } } - function handleDocumentClick(e: Event) { - if (popoverRef.current) { - if (popoverRef.current.contains(e.target as Node)) { - const $footerBar = popoverRef.current.querySelector( - ".bp3-datepicker-footer", - ); - if ($footerBar) { - const $buttons = Array.from( - $footerBar.querySelectorAll("button.bp3-button"), - ); - if ($buttons.some((button) => button.contains(e.target as Node))) { - setDatePickerVisibility(false); - } - } - } - } - } - useEffect(() => { document.body.addEventListener("keydown", handleKeydown); - document.addEventListener("click", handleDocumentClick); return () => { document.body.removeEventListener("keydown", handleKeydown); - document.removeEventListener("click", handleDocumentClick); }; }, []); - function handleOnDayClick() { - setDatePickerVisibility(false); - inputRef.current?.focus(); - } - function handleInteraction(nextOpenState: boolean) { setDatePickerVisibility(nextOpenState); if (!nextOpenState) { @@ -286,7 +257,6 @@ function useKeyboardNavigation(clearButtonText: string) { // event handlers handleTimePickerKeydown, - handleOnDayClick, handleDateInputClick, handleInteraction, }; @@ -300,7 +270,6 @@ function DatePickerComponent(props: DatePickerComponentProps) { const { handleDateInputClick, handleInteraction, - handleOnDayClick, handleTimePickerKeydown, inputRef, isDatePickerVisible, @@ -312,7 +281,6 @@ function DatePickerComponent(props: DatePickerComponentProps) { className={Classes.DATE_PICKER_OVARLAY} clearButtonText={clearButtonText} closeOnSelection={props.closeOnSelection} - dayPickerProps={{ onDayClick: handleOnDayClick }} formatDate={props.formatDate} highlightCurrentDay={props.highlightCurrentDay} inputProps={{ From 3b63f59a162e217ea15c42c5f63ab1554632a863 Mon Sep 17 00:00:00 2001 From: Ankur Singhal Date: Mon, 2 May 2022 15:47:25 +0530 Subject: [PATCH 14/14] added the force true to single-select action selector --- .../ClientSideTests/FormWidgets/DatePicker_With_Switch_spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/DatePicker_With_Switch_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/DatePicker_With_Switch_spec.js index 7d96af076b..32b0b760fb 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/DatePicker_With_Switch_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/DatePicker_With_Switch_spec.js @@ -31,7 +31,7 @@ describe("Switch Widget within Form widget Functionality", function() { cy.setDate(1, "ddd MMM DD YYYY"); const nextDay = dayjs().format("DD/MM/YYYY"); cy.log(nextDay); - cy.get(widgetsPage.actionSelect).click(); + cy.get(widgetsPage.actionSelect).click({ force: true }); cy.get(commonlocators.chooseAction) .children() .contains("Reset widget")