From c3853cd139c229a7f73c787413efe61825426351 Mon Sep 17 00:00:00 2001 From: edleeks87 Date: Mon, 23 Sep 2024 15:39:42 +0100 Subject: [PATCH] feat(select, filterable-select, multi-select): add support for overriding the list width Adds support for overriding the list width via `listWidth` prop. Adds support for placing list at `top-start`, `top-end`, `bottom-start` and `botton-end`. When `top` or `bottom` is passed to `listPlacement` it will internally append `-end` to it. fix #6861 --- .../select-list/select-list.component.tsx | 19 +++- .../filterable-select.component.tsx | 22 ++++- .../filterable-select/filterable-select.mdx | 10 +++ .../filterable-select.spec.tsx | 14 ++- .../filterable-select.stories.tsx | 45 ++++++++++ .../multi-select/multi-select.component.tsx | 26 +++++- .../select/multi-select/multi-select.mdx | 10 +++ .../select/multi-select/multi-select.spec.tsx | 14 ++- .../multi-select/multi-select.stories.tsx | 50 ++++++++++- .../simple-select/components.test-pw.tsx | 27 ++++++ .../simple-select-test.stories.tsx | 10 ++- .../simple-select/simple-select.component.tsx | 27 +++++- .../select/simple-select/simple-select.mdx | 10 +++ .../select/simple-select/simple-select.pw.tsx | 86 +++++++++++++++++++ .../simple-select/simple-select.stories.tsx | 46 +++++++++- .../simple-select/simple-select.test.tsx | 48 +++++++++++ .../useFloating/useFloating.test.tsx | 4 +- 17 files changed, 446 insertions(+), 22 deletions(-) diff --git a/src/components/select/__internal__/select-list/select-list.component.tsx b/src/components/select/__internal__/select-list/select-list.component.tsx index 6b819c40e6..95e642e875 100644 --- a/src/components/select/__internal__/select-list/select-list.component.tsx +++ b/src/components/select/__internal__/select-list/select-list.component.tsx @@ -6,7 +6,7 @@ import React, { useRef, useMemo, } from "react"; -import { flip, offset, size, Side } from "@floating-ui/dom"; +import { flip, offset, size } from "@floating-ui/dom"; import { useVirtualizer, defaultRangeExtractor, @@ -38,6 +38,14 @@ import Loader from "../../../loader"; import Option, { OptionProps } from "../../option"; import SelectListContext from "./select-list.context"; +export type ListPlacement = + | "top" + | "bottom" + | "top-start" + | "bottom-start" + | "top-end" + | "bottom-end"; + export interface SelectListProps { /** The ID for the parent
*/ id?: string; @@ -78,7 +86,7 @@ export interface SelectListProps { /** When true component will work in multi column mode, children should consist of OptionRow components in this mode */ multiColumn?: boolean; /** Placement of the select list relative to the input element */ - listPlacement?: "top" | "bottom"; + listPlacement?: ListPlacement; /** Use the opposite list placement if the set placement does not fit */ flipEnabled?: boolean; /** @private @ignore @@ -96,6 +104,8 @@ export interface SelectListProps { virtualScrollOverscan?: number; /** @private @ignore A callback for when a mouseDown event occurs on the component */ onMouseDown?: () => void; + /** Override the default width of the list element. Number passed is converted into pixel value */ + listWidth?: number; } const TABLE_HEADER_HEIGHT = 48; @@ -125,6 +135,7 @@ const SelectList = React.forwardRef( multiselectValues, enableVirtualScroll, virtualScrollOverscan = 5, + listWidth, ...listProps }: SelectListProps, listContainerRef: React.ForwardedRef @@ -614,7 +625,7 @@ const SelectList = React.forwardRef( size({ apply({ rects, elements }) { Object.assign(elements.floating.style, { - width: `${rects.reference.width}px`, + width: `${listWidth ?? rects.reference.width}px`, }); }, }), @@ -626,7 +637,7 @@ const SelectList = React.forwardRef( ] : []), ], - [flipEnabled] + [listWidth, flipEnabled] ); const loader = isLoading ? ( diff --git a/src/components/select/filterable-select/filterable-select.component.tsx b/src/components/select/filterable-select/filterable-select.component.tsx index 2d840e2c18..c0454f3a16 100644 --- a/src/components/select/filterable-select/filterable-select.component.tsx +++ b/src/components/select/filterable-select/filterable-select.component.tsx @@ -11,6 +11,7 @@ import withFilter from "../__internal__/utils/with-filter.hoc"; import StyledSelect from "../select.style"; import SelectList, { SelectListProps, + ListPlacement, } from "../__internal__/select-list/select-list.component"; import isExpectedOption from "../__internal__/utils/is-expected-option"; import isNavigationKey from "../__internal__/utils/is-navigation-key"; @@ -72,7 +73,7 @@ export interface FilterableSelectProps /** Maximum list height - defaults to 180 */ listMaxHeight?: number; /** Placement of the select list in relation to the input element */ - listPlacement?: "top" | "bottom"; + listPlacement?: ListPlacement; /** Use the opposite list placement if the set placement does not fit */ flipEnabled?: boolean; /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the @@ -93,6 +94,8 @@ export interface FilterableSelectProps onChange?: ( ev: CustomSelectChangeEvent | React.ChangeEvent ) => void; + /** Override the default width of the list element. Number passed is converted into pixel value */ + listWidth?: number; } export const FilterableSelect = React.forwardRef< @@ -138,6 +141,7 @@ export const FilterableSelect = React.forwardRef< disableDefaultFiltering = false, isOptional, required, + listWidth, ...textboxProps }, ref @@ -642,6 +646,19 @@ export const FilterableSelect = React.forwardRef< }; } + let placement: ListPlacement; + + switch (listPlacement) { + case "top": + placement = "top-end"; + break; + case "bottom": + placement = "bottom-end"; + break; + default: + placement = listPlacement; + } + const selectListProps = { ref: listboxRef, id: selectListId.current, @@ -660,11 +677,12 @@ export const FilterableSelect = React.forwardRef< onListScrollBottom, tableHeader, multiColumn, - listPlacement, + listPlacement: listWidth !== undefined ? placement : listPlacement, flipEnabled, isOpen, enableVirtualScroll, virtualScrollOverscan, + listWidth, }; const selectList = disableDefaultFiltering ? ( diff --git a/src/components/select/filterable-select/filterable-select.mdx b/src/components/select/filterable-select/filterable-select.mdx index 0c033ff7f4..bd32f042f6 100644 --- a/src/components/select/filterable-select/filterable-select.mdx +++ b/src/components/select/filterable-select/filterable-select.mdx @@ -47,6 +47,16 @@ You can use `listMaxHeight` prop to override default max height value of select +### List width + +You can use `listWidth` prop to override the width of the select list. By default the list +will have the same width as the input. + + + ### Controlled Usage diff --git a/src/components/select/filterable-select/filterable-select.spec.tsx b/src/components/select/filterable-select/filterable-select.spec.tsx index 22548da81c..87a4598283 100644 --- a/src/components/select/filterable-select/filterable-select.spec.tsx +++ b/src/components/select/filterable-select/filterable-select.spec.tsx @@ -487,7 +487,7 @@ describe("FilterableSelect", () => { ).toBeVisible(); }); - it.each(["top", "bottom"])( + it.each(["top", "bottom", "top-end", "bottom-end"])( "the listPlacement prop should be passed", (listPlacement) => { const wrapper = renderSelect({ listPlacement }); @@ -500,6 +500,18 @@ describe("FilterableSelect", () => { } ); + it.each(["top", "bottom"])( + "the listPlacement prop should be overridden when listWidth is set", + (listPlacement) => { + const wrapper = renderSelect({ listPlacement, listWidth: 100 }); + + simulateDropdownEvent(wrapper, "click"); + expect(wrapper.find(SelectList).prop("listPlacement")).toBe( + `${listPlacement}-end` + ); + } + ); + it("the flipEnabled prop should be passed", () => { const wrapper = renderSelect({ flipEnabled: false }); diff --git a/src/components/select/filterable-select/filterable-select.stories.tsx b/src/components/select/filterable-select/filterable-select.stories.tsx index e726c613cc..6e97b4284b 100644 --- a/src/components/select/filterable-select/filterable-select.stories.tsx +++ b/src/components/select/filterable-select/filterable-select.stories.tsx @@ -12,6 +12,7 @@ import Typography from "../../typography"; import { CustomSelectChangeEvent, FilterableSelect, + FilterableSelectProps, Option, OptionRow, } from ".."; @@ -850,3 +851,47 @@ CustomFilterAndOptionStyle.storyName = "Custom Filter and Option Style"; CustomFilterAndOptionStyle.parameters = { chromatic: { disableSnapshot: true }, }; + +export const ListWidth: Story = () => { + const [listPlacement, setListPlacement] = useState< + FilterableSelectProps["listPlacement"] + >("bottom-end"); + const [value, setValue] = useState(""); + const handleChange = (ev: React.ChangeEvent) => { + setValue(ev.target.value); + }; + return ( + <> + + + + + + + + + + ); +}; +ListWidth.storyName = "List width"; +ListWidth.parameters = { chromatic: { disableSnapshot: true } }; diff --git a/src/components/select/multi-select/multi-select.component.tsx b/src/components/select/multi-select/multi-select.component.tsx index a38104985a..4120f82577 100644 --- a/src/components/select/multi-select/multi-select.component.tsx +++ b/src/components/select/multi-select/multi-select.component.tsx @@ -6,7 +6,6 @@ import React, { useMemo, } from "react"; import invariant from "invariant"; -import { Side } from "@floating-ui/dom"; import { filterOutStyledSystemSpacingProps } from "../../../style/utils"; import SelectTextbox, { @@ -14,7 +13,9 @@ import SelectTextbox, { } from "../__internal__/select-textbox"; import guid from "../../../__internal__/utils/helpers/guid"; import withFilter from "../__internal__/utils/with-filter.hoc"; -import SelectList from "../__internal__/select-list/select-list.component"; +import SelectList, { + ListPlacement, +} from "../__internal__/select-list/select-list.component"; import { StyledSelectPillContainer, StyledSelectMultiSelect, @@ -77,7 +78,7 @@ export interface MultiSelectProps /** Maximum list height - defaults to 180 */ listMaxHeight?: number; /** Placement of the select list in relation to the input element */ - listPlacement?: "top" | "bottom"; + listPlacement?: ListPlacement; /** Use the opposite list placement if the set placement does not fit */ flipEnabled?: boolean; /** Wraps the pill text when it would overflow the input width */ @@ -95,6 +96,8 @@ export interface MultiSelectProps onChange?: ( ev: CustomSelectChangeEvent | React.ChangeEvent ) => void; + /** Override the default width of the list element. Number passed is converted into pixel value */ + listWidth?: number; } export const MultiSelect = React.forwardRef( @@ -136,6 +139,7 @@ export const MultiSelect = React.forwardRef( virtualScrollOverscan, isOptional, required, + listWidth, ...textboxProps }, ref @@ -653,6 +657,19 @@ export const MultiSelect = React.forwardRef( }; } + let placement: ListPlacement; + + switch (listPlacement) { + case "top": + placement = "top-end"; + break; + case "bottom": + placement = "bottom-end"; + break; + default: + placement = listPlacement; + } + const selectList = ( ( isLoading={isLoading} tableHeader={tableHeader} multiColumn={multiColumn} - listPlacement={listPlacement} + listPlacement={listWidth !== undefined ? placement : listPlacement} listMaxHeight={listMaxHeight} flipEnabled={flipEnabled} multiselectValues={actualValue} isOpen={isOpen} enableVirtualScroll={enableVirtualScroll} virtualScrollOverscan={virtualScrollOverscan} + listWidth={listWidth} > {children} diff --git a/src/components/select/multi-select/multi-select.mdx b/src/components/select/multi-select/multi-select.mdx index 208a1c5dab..d167cc00da 100644 --- a/src/components/select/multi-select/multi-select.mdx +++ b/src/components/select/multi-select/multi-select.mdx @@ -46,6 +46,16 @@ You can use `listMaxHeight` prop to override default max height value of select +### List width + +You can use `listWidth` prop to override the width of the select list. By default the list +will have the same width as the input. + + + ### Controlled Usage diff --git a/src/components/select/multi-select/multi-select.spec.tsx b/src/components/select/multi-select/multi-select.spec.tsx index 3f63fd2968..53d6d992d2 100644 --- a/src/components/select/multi-select/multi-select.spec.tsx +++ b/src/components/select/multi-select/multi-select.spec.tsx @@ -299,7 +299,7 @@ describe("MultiSelect", () => { }); }); - it.each(["top", "bottom"])( + it.each(["top", "bottom", "top-end", "bottom-end"])( "the listPlacement prop should be passed", (listPlacement) => { const wrapper = renderSelect({ listPlacement }); @@ -311,6 +311,18 @@ describe("MultiSelect", () => { } ); + it.each(["top", "bottom"])( + "the listPlacement prop should be overridden when listWidth is set", + (listPlacement) => { + const wrapper = renderSelect({ listPlacement, listWidth: 100 }); + + simulateDropdownEvent(wrapper, "click"); + expect(wrapper.find(SelectList).prop("listPlacement")).toBe( + `${listPlacement}-end` + ); + } + ); + it("the flipEnabled prop should be passed", () => { const wrapper = renderSelect({ flipEnabled: false }); diff --git a/src/components/select/multi-select/multi-select.stories.tsx b/src/components/select/multi-select/multi-select.stories.tsx index 8ee697a415..e58f47f693 100644 --- a/src/components/select/multi-select/multi-select.stories.tsx +++ b/src/components/select/multi-select/multi-select.stories.tsx @@ -6,7 +6,7 @@ import generateStyledSystemProps from "../../../../.storybook/utils/styled-syste import Button from "../../button"; import CarbonProvider from "../../carbon-provider"; import Box from "../../box"; -import { MultiSelect, Option, OptionRow } from ".."; +import { MultiSelect, MultiSelectProps, Option, OptionRow } from ".."; const styledSystemProps = generateStyledSystemProps({ margin: true, @@ -569,3 +569,51 @@ export const Virtualised: Story = () => { ); }; Virtualised.storyName = "Virtualised"; + +export const ListWidth: Story = () => { + const [listPlacement, setListPlacement] = useState< + MultiSelectProps["listPlacement"] + >("bottom-end"); + const [value, setValue] = useState([]); + const handleChange = (ev: React.ChangeEvent) => { + const { value: updatedValue } = ev.target; + + if (Array.isArray(updatedValue)) { + setValue(updatedValue); + } + }; + return ( + <> + + + + + + + + + + ); +}; +ListWidth.storyName = "List width"; +ListWidth.parameters = { chromatic: { disableSnapshot: true } }; diff --git a/src/components/select/simple-select/components.test-pw.tsx b/src/components/select/simple-select/components.test-pw.tsx index 997ad36a2d..5369c2d220 100644 --- a/src/components/select/simple-select/components.test-pw.tsx +++ b/src/components/select/simple-select/components.test-pw.tsx @@ -603,3 +603,30 @@ export const WithObjectAsValue = () => { ); }; + +export const ListWidth = ({ + listPlacement, + listWidth, + margin, +}: Partial) => { + const [value, setValue] = useState(""); + const handleChange = (event: React.ChangeEvent) => { + setValue(event.target.value); + }; + + return ( + + + + ); +}; diff --git a/src/components/select/simple-select/simple-select-test.stories.tsx b/src/components/select/simple-select/simple-select-test.stories.tsx index 37c2dc206e..4e2983e953 100644 --- a/src/components/select/simple-select/simple-select-test.stories.tsx +++ b/src/components/select/simple-select/simple-select-test.stories.tsx @@ -34,7 +34,14 @@ export default { "data-element": { table: { disable: true }, control: false }, "data-role": { table: { disable: true }, control: false }, listPlacement: { - options: ["bottom", "top"], + options: [ + "top", + "bottom", + "top-start", + "bottom-start", + "top-end", + "bottom-end", + ], control: { type: "select", }, @@ -92,6 +99,7 @@ Default.args = { mt: 0, listPlacement: undefined, flipEnabled: true, + listWidth: undefined, }; export const DelayedReposition = () => { diff --git a/src/components/select/simple-select/simple-select.component.tsx b/src/components/select/simple-select/simple-select.component.tsx index 85a4f4edc7..5f7f2e9cf5 100644 --- a/src/components/select/simple-select/simple-select.component.tsx +++ b/src/components/select/simple-select/simple-select.component.tsx @@ -6,14 +6,15 @@ import React, { useMemo, } from "react"; import invariant from "invariant"; -import { Side } from "@floating-ui/dom"; import { filterOutStyledSystemSpacingProps } from "../../../style/utils"; import StyledSelect from "../select.style"; import SelectTextbox, { FormInputPropTypes, } from "../__internal__/select-textbox"; -import SelectList from "../__internal__/select-list/select-list.component"; +import SelectList, { + ListPlacement, +} from "../__internal__/select-list/select-list.component"; import guid from "../../../__internal__/utils/helpers/guid"; import getNextChildByText from "../__internal__/utils/get-next-child-by-text"; import isExpectedOption from "../__internal__/utils/is-expected-option"; @@ -78,7 +79,7 @@ export interface SimpleSelectProps /** Maximum list height - defaults to 180 */ listMaxHeight?: number; /** Placement of the select list in relation to the input element */ - listPlacement?: "top" | "bottom"; + listPlacement?: ListPlacement; /** Use the opposite list placement if the set placement does not fit */ flipEnabled?: boolean; /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the @@ -96,6 +97,8 @@ export interface SimpleSelectProps onChange?: ( ev: CustomSelectChangeEvent | React.ChangeEvent ) => void; + /** Override the default width of the list element. Number passed is converted into pixel value */ + listWidth?: number; } export const SimpleSelect = React.forwardRef< @@ -137,6 +140,7 @@ export const SimpleSelect = React.forwardRef< virtualScrollOverscan, isOptional, required, + listWidth, ...props }, ref @@ -490,6 +494,20 @@ export const SimpleSelect = React.forwardRef< ...filterOutStyledSystemSpacingProps(props), }; } + + let placement: ListPlacement; + + switch (listPlacement) { + case "top": + placement = "top-end"; + break; + case "bottom": + placement = "bottom-end"; + break; + default: + placement = listPlacement; + } + const selectList = ( {children} diff --git a/src/components/select/simple-select/simple-select.mdx b/src/components/select/simple-select/simple-select.mdx index 4da179bccc..9c6437eba8 100644 --- a/src/components/select/simple-select/simple-select.mdx +++ b/src/components/select/simple-select/simple-select.mdx @@ -68,6 +68,16 @@ You can use `listMaxHeight` prop to override default max height value of select +### List width + +You can use `listWidth` prop to override the width of the select list. By default the list +will have the same width as the input. + + + ### Controlled usage diff --git a/src/components/select/simple-select/simple-select.pw.tsx b/src/components/select/simple-select/simple-select.pw.tsx index 0e30ffc5bd..813f22ab41 100644 --- a/src/components/select/simple-select/simple-select.pw.tsx +++ b/src/components/select/simple-select/simple-select.pw.tsx @@ -18,6 +18,7 @@ import { SelectWithDynamicallyAddedOption, SimpleSelectControlled, WithObjectAsValue, + ListWidth, } from "./components.test-pw"; import { commonDataElementInputPreview, @@ -996,6 +997,91 @@ test.describe("SimpleSelect component", () => { }); }); + ([ + ["top", "100px 300px", 150, 2], + ["bottom", "0px 300px", 150, 68], + ["top-end", "100px 300px", 150, 2], + ["bottom-end", "0px 300px", 150, 68], + ["top-start", "100px 0px", 0, 2], + ["bottom-start", "100px 0px", 0, 168], + ] as [ + NonNullable, + string, + number, + number + ][]).forEach(([position, margin, left, top]) => { + test(`should render list wider than the input when listWidth is 350 and positioned based on listPlacement of ${position}`, async ({ + mount, + page, + }) => { + await mount( + + ); + + const positionValue = + !position.includes("end") && !position.includes("start") + ? `${position}-end` + : position; + await selectText(page).click(); + const listElement = selectListPosition(page); + const { inputWidth } = await selectText(page).evaluate((el) => ({ + inputWidth: window + .getComputedStyle(el.parentElement as HTMLElement) + .getPropertyValue("width"), + })); + const { listLeftPosition, listTopPosition } = await listElement.evaluate( + (el) => ({ + listLeftPosition: el.getBoundingClientRect().left, + listTopPosition: el.getBoundingClientRect().top, + }) + ); + + await expect(listElement).toHaveAttribute( + "data-floating-placement", + positionValue + ); + await expect(listElement).toBeVisible(); + await expect(listElement).toHaveCSS("width", "350px"); + expect(inputWidth).toBe("200px"); + + // sub-pixel rendering means this is not always exact + expect(listLeftPosition).toBeCloseTo(left); + expect(listTopPosition).toBeCloseTo(top); + }); + }); + + ([ + ["top", "0px"], + ["top-end", "0px"], + ] as [NonNullable, string][]).forEach( + ([position, margin]) => { + test(`should render list wider than the input when listWidth is 350 and flip the placement based on original listPlacement of ${position} when there's no space to render it`, async ({ + mount, + page, + }) => { + await mount( + + ); + + await selectText(page).click(); + const listElement = selectListPosition(page); + const { inputWidth } = await selectText(page).evaluate((el) => ({ + inputWidth: window + .getComputedStyle(el.parentElement as HTMLElement) + .getPropertyValue("width"), + })); + + await expect(listElement).toHaveAttribute( + "data-floating-placement", + "bottom-start" + ); + await expect(listElement).toBeVisible(); + await expect(listElement).toHaveCSS("width", "350px"); + expect(inputWidth).toBe("200px"); + }); + } + ); + [ ["bottom", "0px", "0px", "0px", "20px"], ["top", "600px", "0px", "0px", "20px"], diff --git a/src/components/select/simple-select/simple-select.stories.tsx b/src/components/select/simple-select/simple-select.stories.tsx index 777a1c635b..ad6384258c 100644 --- a/src/components/select/simple-select/simple-select.stories.tsx +++ b/src/components/select/simple-select/simple-select.stories.tsx @@ -15,7 +15,7 @@ import Box from "../../box"; import Typography from "../../typography"; import generateStyledSystemProps from "../../../../.storybook/utils/styled-system-props"; -import SimpleSelect from "./simple-select.component"; +import SimpleSelect, { SimpleSelectProps } from "./simple-select.component"; const styledSystemProps = generateStyledSystemProps({ margin: true, @@ -854,3 +854,47 @@ export const SelectWithDynamicallyAddedOption: Story = () => { ); }; SelectWithDynamicallyAddedOption.storyName = "Dynamically Adding Options"; + +export const ListWidth: Story = () => { + const [listPlacement, setListPlacement] = useState< + SimpleSelectProps["listPlacement"] + >("bottom-end"); + const [value, setValue] = useState(""); + const handleChange = (ev: React.ChangeEvent) => { + setValue(ev.target.value); + }; + return ( + <> + + + + + + + + + ); +}; +ListWidth.storyName = "List width"; +ListWidth.parameters = { chromatic: { disableSnapshot: true } }; diff --git a/src/components/select/simple-select/simple-select.test.tsx b/src/components/select/simple-select/simple-select.test.tsx index 5abd4d7096..790ac95ea9 100644 --- a/src/components/select/simple-select/simple-select.test.tsx +++ b/src/components/select/simple-select/simple-select.test.tsx @@ -198,6 +198,54 @@ test("associates the dropdown list with the correct accessible name from the lab expect(await screen.findByRole("listbox")).toHaveAccessibleName("Colour"); }); +test.each(["top", "bottom"] as const)( + "should override the data attribute on the list when listWidth is set and placement is %s", + async (listPlacement) => { + const user = userEvent.setup(); + render( + {}} + > + + ); + + await user.click(screen.getByRole("combobox")); + + expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute( + "data-floating-placement", + `${listPlacement}-end` + ); + } +); + +test.each(["top-end", "bottom-end", "top-start", "bottom-start"] as const)( + "should not override the data attribute on the list when listWidth is set and placement is %s", + async (listPlacement) => { + const user = userEvent.setup(); + render( + {}} + > + + ); + + await user.click(screen.getByRole("combobox")); + + expect(await screen.findByTestId("select-list-wrapper")).toHaveAttribute( + "data-floating-placement", + listPlacement + ); + } +); + describe("typing into the input", () => { it("selects the first option with text starting with the typed printable character", async () => { const user = userEvent.setup(); diff --git a/src/hooks/__internal__/useFloating/useFloating.test.tsx b/src/hooks/__internal__/useFloating/useFloating.test.tsx index f42bddcebd..2ef893a34c 100644 --- a/src/hooks/__internal__/useFloating/useFloating.test.tsx +++ b/src/hooks/__internal__/useFloating/useFloating.test.tsx @@ -105,9 +105,7 @@ test("when using size middleware, the original width and height are restored aft }), ]; - const { rerender } = await render( - - ); + const { rerender } = render(); const floatingElement = await screen.findByTestId("floating-element"); const positionedStyle = window.getComputedStyle(floatingElement);