From 54d27c736eb066c6da099c130e76be51423fa12b Mon Sep 17 00:00:00 2001 From: mkrds Date: Thu, 11 Feb 2021 22:37:13 +0100 Subject: [PATCH 1/5] refactor(popover): add resize observer --- src/__internal__/popover/popover.component.js | 82 ++++++++++++------- src/__internal__/popover/popover.spec.js | 11 ++- src/__spec_helper__/index.js | 2 + src/__spec_helper__/mock-resize-observer.js | 14 ++++ 4 files changed, 76 insertions(+), 33 deletions(-) create mode 100644 src/__spec_helper__/mock-resize-observer.js diff --git a/src/__internal__/popover/popover.component.js b/src/__internal__/popover/popover.component.js index af8d89f216..c6be79936f 100644 --- a/src/__internal__/popover/popover.component.js +++ b/src/__internal__/popover/popover.component.js @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useLayoutEffect, useRef } from "react"; import ReactDOM from "react-dom"; import PropTypes from "prop-types"; import { createPopper } from "@popperjs/core"; @@ -36,8 +36,9 @@ const Popover = ({ modifiers, }) => { const elementDOM = useRef(); - if (!elementDOM.current) { + if (!elementDOM.current && !disablePortal) { elementDOM.current = document.createElement("div"); + document.body.appendChild(elementDOM.current); } const popperInstance = useRef(); const popperRef = useRef(); @@ -54,41 +55,62 @@ const Popover = ({ popperElementRef = popperRef; } + /* istanbul ignore next */ + const observer = useRef( + new ResizeObserver(() => { + if (popperInstance.current) { + popperInstance.current.update(); + } + }) + ); + useEffect(() => { - popperInstance.current = createPopper( - reference.current, - popperElementRef.current, - { - placement, - onFirstUpdate, - modifiers: [ - alignSameWidthPopper, - { - name: "computeStyles", - options: { - gpuAcceleration: false, + const observerRef = observer.current; + const referenceRef = reference.current; + observer.current.observe(referenceRef); + + return () => { + observerRef.unobserve(referenceRef); + observerRef.disconnect(); + }; + }, [reference]); + + useLayoutEffect(() => { + if (reference.current) { + popperInstance.current = createPopper( + reference.current, + popperElementRef.current, + { + placement, + onFirstUpdate, + modifiers: [ + alignSameWidthPopper, + { + name: "computeStyles", + options: { + gpuAcceleration: false, + }, }, - }, - ...(modifiers || []), - ], - } - ); + ...(modifiers || []), + ], + } + ); + } return () => { - popperInstance.current.destroy(); - popperInstance.current = null; + if (popperInstance.current) { + popperInstance.current.destroy(); + popperInstance.current = null; + } }; }, [modifiers, onFirstUpdate, placement, popperElementRef, reference]); - // eslint-disable-next-line consistent-return useEffect(() => { - if (!disablePortal) { - const portalElement = elementDOM.current; - document.body.appendChild(portalElement); - return () => { - document.body.removeChild(portalElement); - }; - } + return () => { + if (!disablePortal) { + document.body.removeChild(elementDOM.current); + } + }; }, [disablePortal]); if (disablePortal) { @@ -124,7 +146,7 @@ Popover.propTypes = { modifiers: PropTypes.array, // Optional onFirstUpdate funcition, for more information go to: // https://popper.js.org/docs/v2/constructors/#modifiers - onFirstUpdate: PropTypes.array, + onFirstUpdate: PropTypes.func, // When true, children are not rendered in portal disablePortal: PropTypes.bool, // Reference element, children will be positioned in relation to this element - should be a ref diff --git a/src/__internal__/popover/popover.spec.js b/src/__internal__/popover/popover.spec.js index 6a04b7dba4..bd8168b70c 100644 --- a/src/__internal__/popover/popover.spec.js +++ b/src/__internal__/popover/popover.spec.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useCallback, useState } from "react"; import ReactDOM from "react-dom"; import { mount } from "enzyme"; import { createPopper } from "@popperjs/core"; @@ -8,9 +8,14 @@ import Popover, { alignSameWidthPopoverFunction } from "./popover.component"; jest.mock("@popperjs/core"); const Component = (props) => { - const ref = React.createRef(); + const [ref, setRef] = useState({}); + + const setRefCallback = useCallback((reference) => { + setRef({ current: reference }); + }, []); + return ( -
+
diff --git a/src/__spec_helper__/index.js b/src/__spec_helper__/index.js index 7fc2e485f6..e18d15837e 100644 --- a/src/__spec_helper__/index.js +++ b/src/__spec_helper__/index.js @@ -1,6 +1,8 @@ import Enzyme from "enzyme"; import Adapter from "enzyme-adapter-react-16"; import { setup } from "./mock-match-media"; +import setupResizeObserverMock from "./mock-resize-observer"; +setupResizeObserverMock(); setup(); Enzyme.configure({ adapter: new Adapter() }); diff --git a/src/__spec_helper__/mock-resize-observer.js b/src/__spec_helper__/mock-resize-observer.js new file mode 100644 index 0000000000..491225a29a --- /dev/null +++ b/src/__spec_helper__/mock-resize-observer.js @@ -0,0 +1,14 @@ +const setupResizeObserverMock = () => { + if (!global.window) { + return; + } + global.window.ResizeObserver = + global.window.ResizeObserver || + jest.fn().mockImplementation(() => ({ + disconnect: jest.fn(), + observe: jest.fn(), + unobserve: jest.fn(), + })); +}; + +export default setupResizeObserverMock; From 7797e45fb6d07c3569b8ea9969337fc33ffe8926 Mon Sep 17 00:00:00 2001 From: mkrds Date: Thu, 11 Feb 2021 22:37:51 +0100 Subject: [PATCH 2/5] refactor(action-popover): remove unnecessary settimeout --- .../action-popover-item.component.js | 25 ++++++------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/src/components/action-popover/action-popover-item.component.js b/src/components/action-popover/action-popover-item.component.js index 601365f223..9feb134cc7 100644 --- a/src/components/action-popover/action-popover-item.component.js +++ b/src/components/action-popover/action-popover-item.component.js @@ -19,7 +19,6 @@ import createGuid from "../../utils/helpers/guid"; import ActionPopoverContext from "./action-popover-context"; const INTERVAL = 150; -const DEFER_TIMEOUT = 30; const MenuItem = ({ children, @@ -43,7 +42,6 @@ const MenuItem = ({ const [isLeftAligned, setIsLeftAligned] = useState(true); const submenuRef = useRef(); const ref = useRef(); - const refTimer = useRef(); const mouseEnterTimer = useRef(); const mouseLeaveTimer = useRef(); const { spacing } = theme; @@ -64,23 +62,16 @@ const MenuItem = ({ } }, [submenu, spacing, placement]); - const setRef = useCallback( - (element) => { - clearTimeout(refTimer.current); - refTimer.current = setTimeout(() => { - ref.current = element; - alignSubmenu(); - if (focusItem && element) { - element.focus(); - } - }, DEFER_TIMEOUT); - }, - [alignSubmenu, focusItem] - ); + useEffect(() => { + alignSubmenu(); + + if (focusItem && ref.current) { + ref.current.focus(); + } + }, [alignSubmenu, focusItem]); useEffect(() => { return function cleanup() { - clearTimeout(refTimer.current); clearTimeout(mouseEnterTimer.current); clearTimeout(mouseLeaveTimer.current); }; @@ -199,7 +190,7 @@ const MenuItem = ({ return (
Date: Thu, 11 Feb 2021 22:39:25 +0100 Subject: [PATCH 3/5] fix(multi-select): fix closing multi-select when deleting pills --- .../multi-select/multi-select.component.js | 49 ++++++----- .../select/multi-select/multi-select.spec.js | 81 ++++++++++--------- 2 files changed, 64 insertions(+), 66 deletions(-) diff --git a/src/components/select/multi-select/multi-select.component.js b/src/components/select/multi-select/multi-select.component.js index ea26a1429b..38f66bbed6 100644 --- a/src/components/select/multi-select/multi-select.component.js +++ b/src/components/select/multi-select/multi-select.component.js @@ -54,7 +54,6 @@ const MultiSelect = React.forwardRef( const [selectedValue, setSelectedValue] = useState([]); const [highlightedValue, setHighlightedValue] = useState(""); const [filterText, setFilterText] = useState(""); - const [repositionTrigger, setRepositionTrigger] = useState(false); const [placeholderOverride, setPlaceholderOverride] = useState(); const setOpen = useCallback(() => { @@ -98,6 +97,25 @@ const MultiSelect = React.forwardRef( [children, setOpen] ); + const removeSelectedValue = useCallback( + (index) => { + setSelectedValue((previousValue) => { + isClickTriggeredBySelect.current = true; + if (previousValue.length === 0) { + return previousValue; + } + const newValue = [...previousValue]; + newValue.splice(index, 1); + if (isControlled.current && onChange) { + onChange(createCustomEvent(newValue)); + return newValue; + } + return newValue; + }); + }, + [createCustomEvent, onChange] + ); + const handleTextboxKeydown = useCallback( (event) => { const { key } = event; @@ -135,7 +153,10 @@ const MultiSelect = React.forwardRef( const notInContainer = containerRef.current && !containerRef.current.contains(event.target); - if (notInContainer && !isClickTriggeredBySelect.current) { + const notInList = + listboxRef.current && !listboxRef.current.contains(event.target); + + if (notInContainer && notInList && !isClickTriggeredBySelect.current) { setTextValue(""); setFilterText(""); setHighlightedValue(""); @@ -227,10 +248,6 @@ const MultiSelect = React.forwardRef( if (!isControlled.current && onChange) { onChange(createCustomEvent(selectedValue)); } - - setRepositionTrigger((previousValue) => { - return !previousValue; - }); }, [createCustomEvent, onChange, selectedValue]); function handleTextboxClick(event) { @@ -377,25 +394,6 @@ const MultiSelect = React.forwardRef( }); } - function removeSelectedValue(index) { - setSelectedValue((previousValue) => { - if (previousValue.length === 0) { - return previousValue; - } - - const newValue = [...previousValue]; - newValue.splice(index, 1); - - if (isControlled.current && onChange) { - onChange(createCustomEvent(newValue)); - - return previousValue; - } - - return newValue; - }); - } - function assignInput(input) { setTextboxRef(input.current); @@ -448,7 +446,6 @@ const MultiSelect = React.forwardRef( filterText={filterText} highlightedValue={highlightedValue} noResultsMessage={noResultsMessage} - repositionTrigger={repositionTrigger} disablePortal={disablePortal} > {children} diff --git a/src/components/select/multi-select/multi-select.spec.js b/src/components/select/multi-select/multi-select.spec.js index 9af0423bd9..90a0d6f379 100644 --- a/src/components/select/multi-select/multi-select.spec.js +++ b/src/components/select/multi-select/multi-select.spec.js @@ -8,12 +8,53 @@ import Textbox from "../../../__experimental__/components/textbox"; import SelectTextbox from "../select-textbox/select-textbox.component"; import Option from "../option/option.component"; import SelectList from "../select-list/select-list.component"; +import { StyledSelectList } from "../select-list/select-list.style"; import Pill from "../../pill"; import Label from "../../../__experimental__/components/label"; describe("MultiSelect", () => { testStyledSystemMargin((props) => getSelect(props)); + describe("when an HTML element is clicked", () => { + let wrapper; + let domNode; + + beforeEach(() => { + wrapper = mount(getSelect({ openOnFocus: true })); + domNode = wrapper.getDOMNode(); + document.body.appendChild(domNode); + }); + + describe("and that element is part of the Select", () => { + it("then the SelectList should be open", () => { + wrapper.find("input").simulate("focus"); + expect(wrapper.find(SelectList).exists()).toBe(true); + act(() => { + wrapper + .find(StyledSelectList) + .getDOMNode() + .dispatchEvent(new MouseEvent("click", { bubbles: true })); + }); + expect(wrapper.update().find(SelectList).exists()).toBe(true); + }); + }); + + describe("and that element is not part of the Select", () => { + it("then the SelectList should be closed", () => { + wrapper.find("input").simulate("focus"); + expect(wrapper.find(SelectList).exists()).toBe(true); + act(() => { + document.dispatchEvent(new MouseEvent("click", { bubbles: true })); + }); + expect(wrapper.update().find(SelectList).exists()).toBe(false); + }); + }); + + afterEach(() => { + document.body.removeChild(domNode); + }); + }); + it("the input ref should be forwarded", () => { let mockRef; @@ -599,46 +640,6 @@ describe("MultiSelect", () => { }); }); - describe("when an HTML element is clicked", () => { - let wrapper; - let domNode; - - beforeEach(() => { - wrapper = mount(getSelect({ openOnFocus: true })); - domNode = wrapper.getDOMNode(); - document.body.appendChild(domNode); - }); - - describe("and that element is part of the Select", () => { - it("then the SelectList should be open", () => { - wrapper.find("input").simulate("focus"); - expect(wrapper.find(SelectList).exists()).toBe(true); - act(() => { - wrapper - .find(SelectList) - .getDOMNode() - .dispatchEvent(new MouseEvent("click", { bubbles: true })); - }); - expect(wrapper.update().find(SelectList).exists()).toBe(true); - }); - }); - - describe("and that element is not part of the Select", () => { - it("then the SelectList should be closed", () => { - wrapper.find("input").simulate("focus"); - expect(wrapper.find(SelectList).exists()).toBe(true); - act(() => { - document.dispatchEvent(new MouseEvent("click", { bubbles: true })); - }); - expect(wrapper.update().find(SelectList).exists()).toBe(false); - }); - }); - - afterEach(() => { - document.body.removeChild(domNode); - }); - }); - describe("when the component is controlled", () => { const expectedObject = { target: { From 9bd1a74962903c0b3c8f9c2455227701e210afec Mon Sep 17 00:00:00 2001 From: mkrds Date: Thu, 11 Feb 2021 22:43:24 +0100 Subject: [PATCH 4/5] feat(select): add popperjs positioning mechanism --- .../select-list-container.style.js | 9 +- .../select-list/select-list.component.js | 132 ++++++++++-------- .../select/select-list/select-list.spec.js | 51 ++++--- .../select/select-list/select-list.style.js | 24 +++- 4 files changed, 124 insertions(+), 92 deletions(-) diff --git a/src/components/select/select-list/select-list-container.style.js b/src/components/select/select-list/select-list-container.style.js index 95844b073f..3b61adb860 100644 --- a/src/components/select/select-list/select-list-container.style.js +++ b/src/components/select/select-list/select-list-container.style.js @@ -1,23 +1,18 @@ import styled from "styled-components"; import { baseTheme } from "../../../style/themes"; -const overhang = 4; - const StyledSelectListContainer = styled.div` background-color: white; box-shadow: ${({ theme }) => `${theme.shadows.depth1}`}; position: absolute; - z-index: 1000; - top: 100%; - width: calc(100% + ${2 * overhang}px); - left: -${overhang}px; + ${({ placement }) => placement === "top" && "bottom: 0"}; + width: 100%; transition: height 0.15s ease-out; height: ${({ height }) => height}; overflow: hidden; `; StyledSelectListContainer.defaultProps = { - maxHeight: "180px", theme: baseTheme, }; diff --git a/src/components/select/select-list/select-list.component.js b/src/components/select/select-list/select-list.component.js index 378d66feeb..eedbbcb1c2 100644 --- a/src/components/select/select-list/select-list.component.js +++ b/src/components/select/select-list/select-list.component.js @@ -2,6 +2,7 @@ import React, { useEffect, useState, useCallback, + useLayoutEffect, useRef, useMemo, } from "react"; @@ -9,10 +10,11 @@ import PropTypes from "prop-types"; import { StyledSelectList, StyledSelectLoaderContainer, + StyledPopoverContainer, } from "./select-list.style"; +import Popover from "../../../__internal__/popover"; import updateListScrollTop from "./update-list-scroll"; import getNextChildByText from "../utils/get-next-child-by-text"; -import StyledPortal from "../../portal/portal.style"; import getNextIndexByKey from "../utils/get-next-index-by-key"; import ListActionButton from "../list-action-button/list-action-button.component"; import StyledSelectListContainer from "./select-list-container.style"; @@ -21,6 +23,13 @@ import Option from "../option/option.component"; const overhang = 4; +const popoverModifiers = [ + { + name: "preventOverflow", + enabled: false, + }, +]; + const SelectList = React.forwardRef( ( { @@ -33,7 +42,6 @@ const SelectList = React.forwardRef( filterText, anchorElement, highlightedValue, - repositionTrigger, disablePortal, onListAction, isLoading, @@ -44,10 +52,23 @@ const SelectList = React.forwardRef( ) => { const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1); const [listHeight, setListHeight] = useState(0); + const [listWidth, setListWidth] = useState(null); + const [placement, setPlacement] = useState("bottom"); const lastFilter = useRef(""); const listRef = useRef(); const listActionButtonRef = useRef(); + const setPlacementCallback = useCallback((popper) => { + setPlacement(popper.placement); + }, []); + + const anchorRef = useMemo( + () => ({ + current: anchorElement, + }), + [anchorElement] + ); + const childrenList = useMemo(() => React.Children.toArray(children), [ children, ]); @@ -180,25 +201,6 @@ const SelectList = React.forwardRef( ] ); - const repositionList = useCallback(() => { - if (anchorElement) { - const inputBoundingRect = anchorElement.getBoundingClientRect(); - - const top = `${ - window.pageYOffset + inputBoundingRect.top + inputBoundingRect.height - }px`; - const width = `${inputBoundingRect.width + 2 * overhang}px`; - const left = `${ - window.pageXOffset + inputBoundingRect.left - overhang - }px`; - - listContainerRef.current.setAttribute( - "style", - `top: ${top}; width: ${width}; left: ${left}` - ); - } - }, [anchorElement, listContainerRef]); - const handleListScroll = useCallback( (event) => { const element = event.target; @@ -246,7 +248,15 @@ const SelectList = React.forwardRef( return optionsList; }, [children, currentOptionsListIndex, handleSelect, isLoading]); - useEffect(() => { + useLayoutEffect(() => { + if (!disablePortal && anchorElement) { + const inputBoundingRect = anchorElement.getBoundingClientRect(); + const width = `${inputBoundingRect.width + 2 * overhang}px`; + setListWidth(width); + } + }, [disablePortal, anchorElement]); + + useLayoutEffect(() => { let newHeight; newHeight = listRef.current.clientHeight; @@ -299,12 +309,6 @@ const SelectList = React.forwardRef( }); }, [childrenList, filterText, getIndexOfMatch, lastFilter]); - useEffect(() => { - if (!disablePortal) { - repositionList(); - } - }, [disablePortal, repositionList, repositionTrigger]); - useEffect(() => { if (!highlightedValue) { return; @@ -330,40 +334,46 @@ const SelectList = React.forwardRef( ); } - const selectList = ( - - - {childrenWithListProps} - - {listActionButton && ( - - )} - - ); - - if (disablePortal) { - return selectList; - } - - return ( - {selectList} + + + {childrenWithListProps} + + {listActionButton && ( + + )} + + + ); } ); @@ -387,8 +397,6 @@ SelectList.propTypes = { filterText: PropTypes.string, /** Value of option to be highlighted on component render */ highlightedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - /** A trigger to manually reposition the list */ - repositionTrigger: PropTypes.bool, /** True for default text button or a Button Component to be rendered */ listActionButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]), /** A callback for when the Action Button is triggered */ diff --git a/src/components/select/select-list/select-list.spec.js b/src/components/select/select-list/select-list.spec.js index 0a91aa4ca7..6247fabdf5 100644 --- a/src/components/select/select-list/select-list.spec.js +++ b/src/components/select/select-list/select-list.spec.js @@ -3,15 +3,15 @@ import { act } from "react-dom/test-utils"; import { mount } from "enzyme"; import SelectList from "./select-list.component"; -import { StyledSelectList } from "./select-list.style"; +import { StyledSelectList, StyledPopoverContainer } from "./select-list.style"; import { baseTheme } from "../../../style/themes"; import Option from "../option/option.component"; import OptionGroupHeader from "../option-group-header/option-group-header.component"; -import Portal from "../../portal"; import ListActionButton from "../list-action-button/list-action-button.component"; import Loader from "../../loader"; import { assertStyleMatch } from "../../../__spec_helper__/test-utils"; import StyledSelectListContainer from "./select-list-container.style"; +import Popover from "../../../__internal__/popover"; const escapeKeyDownEvent = new KeyboardEvent("keydown", { key: "Escape", @@ -269,10 +269,7 @@ describe("SelectList", () => { mockAnchorElement.appendChild(mockInput); const getBoundingClientRectMock = () => { return { - top: 100, - left: 100, width: 200, - height: 50, }; }; mockAnchorElement.getBoundingClientRect = getBoundingClientRectMock; @@ -294,18 +291,11 @@ describe("SelectList", () => { document.body.removeChild(testContainer); }); - it('then the list wrapper should have expected "top", "left" and "width" values', () => { - const listWrapperSelector = 'div[data-element="select-list-wrapper"]'; - expect( - wrapper.find("Portal").find(listWrapperSelector).getDOMNode().style.top - ).toBe("150px"); - expect( - wrapper.find("Portal").find(listWrapperSelector).getDOMNode().style.left - ).toBe("96px"); - expect( - wrapper.find("Portal").find(listWrapperSelector).getDOMNode().style - .width - ).toBe("208px"); + it('then the popover container should have expected "width" value', () => { + assertStyleMatch( + { width: "208px" }, + wrapper.find(StyledPopoverContainer) + ); }); describe.each([ @@ -475,6 +465,11 @@ describe("SelectList", () => { wrapper.find(StyledSelectListContainer) ); + assertStyleMatch( + { height: "100px" }, + wrapper.find(StyledPopoverContainer) + ); + wrapper.detach(); document.body.removeChild(testContainer); }); @@ -583,15 +578,27 @@ describe("SelectList", () => { }); }); - describe("portal", () => { - it("renders SelectList as a child of portal by default", () => { + describe("popover", () => { + it("renders SelectList as a child of Popover with disablePortal=undefined by default", () => { const wrapper = renderSelectList(); - expect(wrapper.find(Portal).find(StyledSelectList).exists()).toBe(true); + expect(wrapper.find(Popover).find(StyledSelectList).exists()).toBe(true); + expect(wrapper.find(Popover).props().disablePortal).toBe(undefined); }); - it("does not render portal when disablePortal is passed", () => { + it("renders SelectList as a child of Popover with disablePortal=true when disablePortal prop is passed", () => { const wrapper = renderSelectList({ disablePortal: true }); - expect(wrapper.find(Portal).exists()).toBe(false); + expect(wrapper.find(Popover).find(StyledSelectList).exists()).toBe(true); + expect(wrapper.find(Popover).props().disablePortal).toBe(true); + }); + + it("renders StyledSelectListContainer with bottom:0 style when placement is passed as top", () => { + const wrapper = mount(); + assertStyleMatch( + { + bottom: "0", + }, + wrapper + ); }); }); diff --git a/src/components/select/select-list/select-list.style.js b/src/components/select/select-list/select-list.style.js index ab55a6a6cd..4e30fce213 100644 --- a/src/components/select/select-list/select-list.style.js +++ b/src/components/select/select-list/select-list.style.js @@ -1,4 +1,22 @@ import styled, { css } from "styled-components"; +import { baseTheme } from "../../../style/themes"; + +const overhang = 4; + +const StyledPopoverContainer = styled.div` + position: absolute; + z-index: ${({ theme }) => theme.zIndex.popover}; + height: ${({ height }) => height}; + width: calc(100% + ${2 * overhang}px); + ${({ width }) => + css` + width: ${width}; + `}; +`; + +StyledPopoverContainer.defaultProps = { + theme: baseTheme, +}; const StyledSelectList = styled.ul` box-sizing: border-box; @@ -34,4 +52,8 @@ const StyledSelectLoaderContainer = styled.li` width: 100%; `; -export { StyledSelectList, StyledSelectLoaderContainer }; +export { + StyledSelectList, + StyledSelectLoaderContainer, + StyledPopoverContainer, +}; From ab735f61cfd3245ce76a9a2258a404c0eb7a7129 Mon Sep 17 00:00:00 2001 From: Ihor Dluhosh Date: Fri, 12 Feb 2021 12:17:14 +0100 Subject: [PATCH 5/5] test: add force click --- cypress/support/step-definitions/button-steps.js | 2 +- cypress/support/step-definitions/select-steps.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/support/step-definitions/button-steps.js b/cypress/support/step-definitions/button-steps.js index 55207d447d..84e591c98d 100644 --- a/cypress/support/step-definitions/button-steps.js +++ b/cypress/support/step-definitions/button-steps.js @@ -71,7 +71,7 @@ Then("Button as a sibling background color is {string}", (color) => { }); When("I click on {string}", (element) => { - buttonDataComponentIFrame(element).click(); + buttonDataComponentIFrame(element).click({ force: true }); }); When("I click on {string} as a sibling", (element) => { diff --git a/cypress/support/step-definitions/select-steps.js b/cypress/support/step-definitions/select-steps.js index 57198d573c..85d563d78a 100644 --- a/cypress/support/step-definitions/select-steps.js +++ b/cypress/support/step-definitions/select-steps.js @@ -36,7 +36,7 @@ When("I focus openOnFocus Select input", () => { }); When("I click openOnFocus Select input", () => { - openOnFocusID().click(); + openOnFocusID().click({ force: true }); }); Then("{string} Select list is opened", (name) => {