fix: add readOnly prop

packages/orbit-components/src/InputField/index.tsx

@@ -20,21 +20,17 @@ const getDOMType = (type: Lowercase<keyof typeof TYPE_OPTIONS>) => {
   return type;
 };
 
-export const FakeInput = ({
-  error,
-  disabled,
-  readOnly,
-}: Pick<Props, "error" | "disabled" | "readOnly">) => (
+export const FakeInput = ({ error, disabled }: Pick<Props, "error" | "disabled">) => (
   <div
     className={cx(
       "orbit-input-field-fake-input",
-      "h-form-box-normal text-form-element-normal z-[1]",
+      "h-form-box-normal text-form-element-normal z-default",
       "absolute left-0 top-0",
       "duration-fast transition-all ease-in-out",
       "rounded-large tb:rounded-normal box-border w-full",
       "peer-focus:outline-blue-normal peer-focus:outline peer-focus:outline-2",
       error ? "shadow-form-element-error" : "shadow-form-element",
-      disabled || readOnly
+      disabled
         ? "bg-form-element-disabled-background"
         : [
             "bg-form-element-background",
@@ -300,7 +296,7 @@ const InputField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
           {...dataAttrs}
         />
         {suffix && <Suffix disabled={disabled}>{suffix}</Suffix>}
-        <FakeInput error={error} disabled={disabled} readOnly={readOnly} />
+        <FakeInput error={error} disabled={disabled} />
       </div>
       {!insideInputGroup && hasTooltip && (
         <ErrorFormTooltip

packages/orbit-components/src/InputSelect/InputSelect.ct-story.tsx

@@ -68,6 +68,12 @@ export function InputSelectStory() {
         placeholder="Custom Placeholder"
         disabled
       />
+      <InputSelect
+        options={simpleOptions}
+        label="Custom label (readOnly)"
+        defaultSelected={simpleOptions[0]}
+        readOnly
+      />
       <InputSelect options={simpleOptions} label="Custom label" required />
       <InputSelect options={simpleOptions} defaultSelected={simpleOptions[0]} />
       <InputSelect

packages/orbit-components/src/InputSelect/InputSelect.stories.tsx

@@ -48,6 +48,7 @@ export const Grouped = () => {
   ];
 
   const showAll = boolean("Show all", true);
+  const readOnly = boolean("Read only", false);
 
   return (
     <div className="min-h-[1000px]">
@@ -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}
       />
     </div>
   );
@@ -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}
       />
     </div>
   );
@@ -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 (
     <div className="min-h-[1000px]">
@@ -236,6 +242,7 @@ export const Playground = () => {
         emptyState={emptyStateMessage}
         showAll={showAll}
         showAllLabel={showAllLabel}
+        readOnly={readOnly}
       />
     </div>
   );

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(
+      <InputSelect
+        id={id}
+        label={label}
+        options={options}
+        name={name}
+        defaultSelected={jetLiOption}
+        onFocus={onFocus}
+        readOnly
+      />,
+    );
+
+    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";

packages/orbit-components/src/InputSelect/index.tsx

@@ -49,6 +49,7 @@ const InputSelect = React.forwardRef<HTMLInputElement, Props>(
       maxWidth,
       onKeyDown,
       spaceAfter,
+      readOnly,
       ...props
     },
     ref,
@@ -129,8 +130,10 @@ const InputSelect = React.forwardRef<HTMLInputElement, Props>(
 
     const handleFocus = (ev: React.FocusEvent<HTMLInputElement>) => {
       if (onFocus) onFocus(ev);
-      setIsOpened(true);
-      setResults(results || groupedOptions);
+      if (!readOnly) {
+        setIsOpened(true);
+        setResults(results || groupedOptions);
+      }
     };
 
     const handleBlur = (ev: React.FocusEvent<HTMLInputElement>) => {
@@ -212,19 +215,25 @@ const InputSelect = React.forwardRef<HTMLInputElement, Props>(
         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"
         ariaActiveDescendant={activeDescendant}
         ariaControls={isOpened ? dropdownId : undefined}
         autoComplete="off"
         ref={ref}
+        readOnly={readOnly}
         prefix={selectedOption && selectedOption.prefix}
         suffix={
+          !readOnly &&
           String(inputValue).length > 1 && (
             <button
               className={cx(
@@ -436,7 +445,9 @@ const InputSelect = React.forwardRef<HTMLInputElement, Props>(
               label={label}
               help={help}
               error={error}
-              onFocus={() => setIsOpened(true)}
+              onFocus={
+                !readOnly ? () => setIsOpened(true) : ev => (onFocus ? onFocus(ev) : undefined)
+              }
               readOnly
               role="textbox"
               placeholder={placeholder}