diff --git a/packages/orbit-components/src/InputSelect/InputSelect.ct-story.tsx b/packages/orbit-components/src/InputSelect/InputSelect.ct-story.tsx
index e1c00e17f4..a1ee5b7496 100644
--- a/packages/orbit-components/src/InputSelect/InputSelect.ct-story.tsx
+++ b/packages/orbit-components/src/InputSelect/InputSelect.ct-story.tsx
@@ -60,23 +60,35 @@ const advancedOptions = [
export function InputSelectStory() {
return (
-
-
+
+
-
-
+
+
-
-
+
+
);
}
@@ -84,7 +96,7 @@ export function InputSelectStory() {
export function InputSelectDropdownStory() {
return (
-
+
);
}
@@ -92,7 +104,13 @@ export function InputSelectDropdownStory() {
export function InputSelectDropdownSizesStory() {
return (
-
+
);
}
@@ -100,7 +118,7 @@ export function InputSelectDropdownSizesStory() {
export function InputSelectDropdownEmptyStory() {
return (
-
+
);
}
@@ -108,7 +126,7 @@ export function InputSelectDropdownEmptyStory() {
export function InputSelectDropdownGroupsStory() {
return (
-
+
);
}
diff --git a/packages/orbit-components/src/InputSelect/InputSelect.stories.tsx b/packages/orbit-components/src/InputSelect/InputSelect.stories.tsx
index 6a7713a760..60f3e54378 100644
--- a/packages/orbit-components/src/InputSelect/InputSelect.stories.tsx
+++ b/packages/orbit-components/src/InputSelect/InputSelect.stories.tsx
@@ -58,6 +58,7 @@ export const Grouped = () => {
onChange={action("onChange")}
onOptionSelect={action("onOptionSelect")}
showAll={showAll}
+ readOnly
/>
);
@@ -116,6 +117,7 @@ export const PreviouslySelected = () => {
prevSelected={currencyOptions[2]}
prevSelectedLabel={prevSelectedLabel}
defaultSelected={currencyOptions[2]}
+ readOnly
/>
);
@@ -236,6 +238,7 @@ export const Playground = () => {
emptyState={emptyStateMessage}
showAll={showAll}
showAllLabel={showAllLabel}
+ 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..cf8afa9820 100644
--- a/packages/orbit-components/src/InputSelect/__tests__/index.test.tsx
+++ b/packages/orbit-components/src/InputSelect/__tests__/index.test.tsx
@@ -62,6 +62,7 @@ describe("InputSelect", () => {
onOptionSelect={onOptionSelect}
onChange={onChange}
onClose={onClose}
+ readOnly
/>,
);
@@ -148,6 +149,7 @@ describe("InputSelect", () => {
defaultSelected={jetLiOption}
onClose={onClose}
onOptionSelect={onOptionSelect}
+ readOnly
/>,
);
@@ -182,6 +184,7 @@ describe("InputSelect", () => {
defaultSelected={jetLiOption}
onClose={onClose}
onOptionSelect={onOptionSelect}
+ readOnly
/>,
);
@@ -206,6 +209,7 @@ describe("InputSelect", () => {
name={name}
prevSelected={jetLiOption}
prevSelectedLabel={prevSelectedLabel}
+ readOnly
/>,
);
@@ -219,7 +223,9 @@ describe("InputSelect", () => {
describe("when showAll is false", () => {
it("should not render repeated options", async () => {
const showAllLabel = "Those without a group";
- render();
+ render(
+ ,
+ );
await user.tab();
// after focus dropdown should have all options grouped and then show only the ones without a group