From 2ba5d25000d5b9161c3c3f795365304717f29bbd Mon Sep 17 00:00:00 2001 From: Sarka Chwastkova Date: Fri, 26 Jul 2024 16:10:33 +0200 Subject: [PATCH 1/3] fix(InputSelect): adjust styles and functionality when readOnly is true --- .../src/InputSelect/InputSelect.ct-story.tsx | 6 +++ .../src/InputSelect/InputSelect.stories.tsx | 7 +++ .../src/InputSelect/__tests__/index.test.tsx | 43 +++++++++++++++++++ .../src/InputSelect/index.tsx | 25 ++++++++--- 4 files changed, 74 insertions(+), 7 deletions(-) diff --git a/packages/orbit-components/src/InputSelect/InputSelect.ct-story.tsx b/packages/orbit-components/src/InputSelect/InputSelect.ct-story.tsx index e1c00e17f4..8ab3662356 100644 --- a/packages/orbit-components/src/InputSelect/InputSelect.ct-story.tsx +++ b/packages/orbit-components/src/InputSelect/InputSelect.ct-story.tsx @@ -68,6 +68,12 @@ export function InputSelectStory() { placeholder="Custom Placeholder" disabled /> + { ]; const showAll = boolean("Show all", true); + const readOnly = boolean("Read only", false); return (
@@ -56,8 +57,10 @@ export const Grouped = () => { options={currencyOptions} onClose={action("onClose")} onChange={action("onChange")} + onFocus={action("onFocus")} onOptionSelect={action("onOptionSelect")} showAll={showAll} + readOnly={readOnly} />
); @@ -102,6 +105,7 @@ export const PreviouslySelected = () => { ]; const showAll = boolean("Show all", true); + const readOnly = boolean("Read only", false); const prevSelectedLabel = text("prevSelectedLabel", "Previously selected"); return ( @@ -116,6 +120,7 @@ export const PreviouslySelected = () => { prevSelected={currencyOptions[2]} prevSelectedLabel={prevSelectedLabel} defaultSelected={currencyOptions[2]} + readOnly={readOnly} /> ); @@ -216,6 +221,7 @@ export const Playground = () => { const maxHeight = text("maxHeight", "400px"); const hasError = boolean("hasError", false); const hasHelp = boolean("hasHelp", false); + const readOnly = boolean("Read only", false); return (
@@ -236,6 +242,7 @@ export const Playground = () => { emptyState={emptyStateMessage} showAll={showAll} showAllLabel={showAllLabel} + readOnly={readOnly} />
); diff --git a/packages/orbit-components/src/InputSelect/__tests__/index.test.tsx b/packages/orbit-components/src/InputSelect/__tests__/index.test.tsx index 3a25e5183a..1657020fd8 100644 --- a/packages/orbit-components/src/InputSelect/__tests__/index.test.tsx +++ b/packages/orbit-components/src/InputSelect/__tests__/index.test.tsx @@ -216,6 +216,49 @@ describe("InputSelect", () => { expect(screen.getAllByRole("option")).toHaveLength(1 + 2 + 1 + 4); // (1 previously selected, 2 asian, 1 american, 4 all) }); + it("can be readOnly", async () => { + const onFocus = jest.fn(); + + render( + , + ); + + const input = screen.getByRole("textbox"); + const dropdown = screen.queryByRole("listbox"); + + expect(input).toHaveValue(jetLiOption.title); + + await user.tab(); + expect(onFocus).toHaveBeenCalledTimes(1); + expect(dropdown).not.toBeInTheDocument(); + + // Prevent component to not be in focus state + input.blur(); + + // Check if dropdown is not shown on a click + await user.click(input); + expect(onFocus).toHaveBeenCalledTimes(2); + expect(dropdown).not.toBeInTheDocument(); + + // Check if dropdown is not shown on a focus + fireEvent.focus(input); + expect(onFocus).toHaveBeenCalledTimes(3); + expect(dropdown).not.toBeInTheDocument(); + + // Assert that input field still includes the same value + await user.type(input, "Arnold"); + expect(onFocus).toHaveBeenCalledTimes(3); + expect(input).toHaveValue(jetLiOption.title); + }); + describe("when showAll is false", () => { it("should not render repeated options", async () => { const showAllLabel = "Those without a group"; diff --git a/packages/orbit-components/src/InputSelect/index.tsx b/packages/orbit-components/src/InputSelect/index.tsx index ffaf9acdfe..525c9fd8d7 100644 --- a/packages/orbit-components/src/InputSelect/index.tsx +++ b/packages/orbit-components/src/InputSelect/index.tsx @@ -49,6 +49,7 @@ const InputSelect = React.forwardRef( maxWidth, onKeyDown, spaceAfter, + readOnly, ...props }, ref, @@ -129,8 +130,10 @@ const InputSelect = React.forwardRef( const handleFocus = (ev: React.FocusEvent) => { if (onFocus) onFocus(ev); - setIsOpened(true); - setResults(results || groupedOptions); + if (!readOnly) { + setIsOpened(true); + setResults(results || groupedOptions); + } }; const handleBlur = (ev: React.FocusEvent) => { @@ -212,10 +215,14 @@ const InputSelect = React.forwardRef( autoFocus={!isLargeMobile} role="combobox" value={inputValue} - onKeyDown={ev => { - if (onKeyDown) onKeyDown(ev); - handleDropdownKey(ev); - }} + onKeyDown={ + !readOnly + ? ev => { + if (onKeyDown) onKeyDown(ev); + handleDropdownKey(ev); + } + : undefined + } ariaHasPopup={isOpened} ariaExpanded={isOpened} ariaAutocomplete="list" @@ -223,8 +230,10 @@ const InputSelect = React.forwardRef( ariaControls={isOpened ? dropdownId : undefined} autoComplete="off" ref={ref} + readOnly={readOnly} prefix={selectedOption && selectedOption.prefix} suffix={ + !readOnly && String(inputValue).length > 1 && (