From 4e5a88d248e067ad38c623cfc7034894c4bf430b Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Mon, 31 Oct 2022 15:35:18 +0000
Subject: [PATCH 1/7] chore: wip

---
 .../src/components/MultiSelect/MultiSelect.js | 31 +++++++++++++++++--
 .../MultiSelect/MultiSelect.stories.js        |  3 ++
 .../components/multiselect/_multiselect.scss  | 27 ++++++++++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index ae686e941029..21eb60bc1296 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -70,6 +70,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
     onMenuChange,
     direction,
     selectedItems: selected,
+    readOnly,
   },
   ref
 ) {
@@ -169,6 +170,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
       [`${prefix}--multi-select--selected`]:
         selectedItems && selectedItems.length > 0,
       [`${prefix}--list-box--up`]: direction === 'top',
+      [`${prefix}--multi-select--readonly`]: readOnly,
     }
   );
 
@@ -234,6 +236,24 @@ const MultiSelect = React.forwardRef(function MultiSelect(
       : setIsFocused(evt.type === 'focus' ? true : false);
   };
 
+  const readOnlyEventHandlers = readOnly
+    ? {
+        onClick: (evt) => {
+          // NOTE: does not prevent click
+          evt.preventDefault();
+          // focus on the element as per readonly input behavior
+          evt.target.focus();
+        },
+        onKeyDown: (evt) => {
+          const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
+          // This prevents the select from opening for the above keys
+          if (selectAccessKeys.includes(evt.key)) {
+            evt.preventDefault();
+          }
+        },
+      }
+    : {};
+
   return (
     <div className={wrapperClasses}>
       <label className={titleClasses} {...getLabelProps()}>
@@ -252,6 +272,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
         size={size}
         className={className}
         disabled={disabled}
+        readOnly={readOnly}
         light={light}
         invalid={invalid}
         invalidText={invalidText}
@@ -274,10 +295,11 @@ const MultiSelect = React.forwardRef(function MultiSelect(
           aria-disabled={disabled}
           {...toggleButtonProps}
           ref={mergeRefs(toggleButtonProps.ref, ref)}
-          onKeyDown={onKeyDown}>
+          onKeyDown={onKeyDown}
+          {...readOnlyEventHandlers}>
           {selectedItems.length > 0 && (
             <ListBox.Selection
-              clearSelection={!disabled ? clearSelection : noop}
+              clearSelection={!disabled && !readOnly ? clearSelection : noop}
               selectionCount={selectedItems.length}
               translateWithId={translateWithId}
               disabled={disabled}
@@ -449,6 +471,11 @@ MultiSelect.propTypes = {
    */
   open: PropTypes.bool,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * For full control of the selected items
    */
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index dedac74e3a72..1d056f88eeea 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -65,6 +65,9 @@ export default {
     open: {
       table: { disable: true },
     },
+    readOnly: {
+      control: { type: 'boolean' },
+    },
     title: {
       table: { disable: true },
     },
diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
index 4fc986bc8508..36925199679e 100644
--- a/packages/styles/scss/components/multiselect/_multiselect.scss
+++ b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -105,4 +105,31 @@
     .#{$prefix}--list-box__menu {
     visibility: hidden;
   }
+
+  $icon-readonly: $icon-disabled;
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly,
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--list-box__menu-icon
+    svg {
+    fill: $icon-readonly;
+  }
+
+  $icon-readonly: $icon-disabled;
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag--filter,
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag__close-icon:hover {
+    background-color: transparent;
+    color: $text-primary;
+  }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag--filter
+    svg {
+    fill: $icon-readonly;
+  }
 }

From 13880833bbfe68be508c8c17500e289422a07dac Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Mon, 31 Oct 2022 17:18:14 +0000
Subject: [PATCH 2/7] feat: readonly multi select

---
 .../__tests__/__snapshots__/PublicAPI-test.js.snap |  3 +++
 .../src/components/ListBox/ListBoxSelection.js     | 13 ++++++++++---
 .../src/components/MultiSelect/MultiSelect.js      |  2 ++
 .../MultiSelect/__tests__/MultiSelect-test.js      | 14 ++++++++++++++
 .../scss/components/multiselect/_multiselect.scss  |  5 +++++
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 5634ca994276..ee8b4a37bb1e 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4814,6 +4814,9 @@ Map {
       "open": Object {
         "type": "bool",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "selectedItems": Object {
         "type": "array",
       },
diff --git a/packages/react/src/components/ListBox/ListBoxSelection.js b/packages/react/src/components/ListBox/ListBoxSelection.js
index d05822d80055..da6f19a3e12f 100644
--- a/packages/react/src/components/ListBox/ListBoxSelection.js
+++ b/packages/react/src/components/ListBox/ListBoxSelection.js
@@ -23,6 +23,7 @@ function ListBoxSelection({
   translateWithId: t,
   disabled,
   onClearSelection,
+  readOnly,
 }) {
   const prefix = usePrefix();
   const className = cx(`${prefix}--list-box__selection`, {
@@ -31,7 +32,7 @@ function ListBoxSelection({
   });
   const handleOnClick = (event) => {
     event.stopPropagation();
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
     clearSelection(event);
@@ -41,7 +42,7 @@ function ListBoxSelection({
   };
   const handleOnKeyDown = (event) => {
     event.stopPropagation();
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
 
@@ -75,7 +76,8 @@ function ListBoxSelection({
         onKeyDown={handleOnKeyDown}
         disabled={disabled}
         aria-label={t('clear.all')}
-        title={description}>
+        title={description}
+        aria-disabled={readOnly ? true : undefined}>
         <Close />
       </div>
     </div>
@@ -134,6 +136,11 @@ ListBoxSelection.propTypes = {
    */
   onKeyDown: PropTypes.func,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify an optional `selectionCount` value that will be used to determine
    * whether the selection should display a badge or a single clear icon.
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index 21eb60bc1296..3430c912c010 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -251,6 +251,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
             evt.preventDefault();
           }
         },
+        ['aria-disabled']: true,
       }
     : {};
 
@@ -299,6 +300,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
           {...readOnlyEventHandlers}>
           {selectedItems.length > 0 && (
             <ListBox.Selection
+              readOnly={readOnly}
               clearSelection={!disabled && !readOnly ? clearSelection : noop}
               selectionCount={selectedItems.length}
               translateWithId={translateWithId}
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index 091edd89eb16..a0dfbbaa769b 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -241,6 +241,20 @@ describe('MultiSelect', () => {
     ).toBeFalsy();
   });
 
+  it('should not be interactive if readonly', () => {
+    const items = generateItems(4, generateGenericItem);
+    const label = 'test-label';
+    const { container } = render(
+      <MultiSelect id="test" readOnly={true} label={label} items={items} />
+    );
+    const labelNode = getByText(container, label);
+    Simulate.click(labelNode);
+
+    expect(
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
+    ).toBeFalsy();
+  });
+
   describe('Component API', () => {
     it('should set the default selected items with the `initialSelectedItems` prop', () => {
       const items = generateItems(4, generateGenericItem);
diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
index 36925199679e..7169e5ea36d8 100644
--- a/packages/styles/scss/components/multiselect/_multiselect.scss
+++ b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -127,6 +127,11 @@
     color: $text-primary;
   }
 
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--tag--filter {
+    box-shadow: 0 0 0 1px $background-inverse;
+  }
+
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
     .#{$prefix}--tag--filter
     svg {

From 2680a4c8a460ae193704be8459883e8fbd9a4f56 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Tue, 1 Nov 2022 10:54:31 +0000
Subject: [PATCH 3/7] chore: remove unnecessary scss vars

---
 .../styles/scss/components/multiselect/_multiselect.scss   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
index 7169e5ea36d8..7c15c39a6167 100644
--- a/packages/styles/scss/components/multiselect/_multiselect.scss
+++ b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -106,7 +106,7 @@
     visibility: hidden;
   }
 
-  $icon-readonly: $icon-disabled;
+  $icon-disabled: $icon-disabled;
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly,
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly:hover {
     background-color: transparent;
@@ -115,10 +115,9 @@
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
     .#{$prefix}--list-box__menu-icon
     svg {
-    fill: $icon-readonly;
+    fill: $icon-disabled;
   }
 
-  $icon-readonly: $icon-disabled;
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
     .#{$prefix}--tag--filter,
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
@@ -135,6 +134,6 @@
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
     .#{$prefix}--tag--filter
     svg {
-    fill: $icon-readonly;
+    fill: $icon-disabled;
   }
 }

From 5d0e5144bb98912b3f087971127698d39631e582 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Tue, 1 Nov 2022 11:00:07 +0000
Subject: [PATCH 4/7] chore: adjust aria-disabled

---
 packages/react/src/components/MultiSelect/MultiSelect.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index 3430c912c010..b0d1aa5d2d9e 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -251,7 +251,6 @@ const MultiSelect = React.forwardRef(function MultiSelect(
             evt.preventDefault();
           }
         },
-        ['aria-disabled']: true,
       }
     : {};
 
@@ -293,7 +292,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
           type="button"
           className={`${prefix}--list-box__field`}
           disabled={disabled}
-          aria-disabled={disabled}
+          aria-disabled={disabled || readOnly}
           {...toggleButtonProps}
           ref={mergeRefs(toggleButtonProps.ref, ref)}
           onKeyDown={onKeyDown}

From 5579215f76bc1195a7bb1e9f697bb7b36e0e97a1 Mon Sep 17 00:00:00 2001
From: Lee Chase <lee.chase@uk.ibm.com>
Date: Mon, 7 Nov 2022 12:36:54 +0000
Subject: [PATCH 5/7] fix: cursor following review

---
 .../styles/scss/components/multiselect/_multiselect.scss  | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
index 7c15c39a6167..4fbb3fbdfe7f 100644
--- a/packages/styles/scss/components/multiselect/_multiselect.scss
+++ b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -124,6 +124,7 @@
     .#{$prefix}--tag__close-icon:hover {
     background-color: transparent;
     color: $text-primary;
+    cursor: default;
   }
 
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
@@ -136,4 +137,11 @@
     svg {
     fill: $icon-disabled;
   }
+
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly
+    .#{$prefix}--list-box__menu-icon {
+    cursor: default;
+  }
 }

From 656b186ebcbf12a137633fe151a70d9a939bb1f0 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Tue, 8 Nov 2022 14:19:01 -0600
Subject: [PATCH 6/7] docs(multiselect): scope readOnly control to playground

---
 .../react/src/components/MultiSelect/MultiSelect.stories.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
index 1d056f88eeea..27854b7d671c 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -65,9 +65,6 @@ export default {
     open: {
       table: { disable: true },
     },
-    readOnly: {
-      control: { type: 'boolean' },
-    },
     title: {
       table: { disable: true },
     },
@@ -207,6 +204,9 @@ Playground.argTypes = {
     },
     defaultValue: 'To clear selection, press Delete or Backspace,',
   },
+  readOnly: {
+    control: { type: 'boolean' },
+  },
 };
 
 export const Default = () => {

From 6b416c219ac040a8324821c08b825f992e9e5be2 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Tue, 8 Nov 2022 14:19:25 -0600
Subject: [PATCH 7/7] Update
 packages/styles/scss/components/multiselect/_multiselect.scss

---
 packages/styles/scss/components/multiselect/_multiselect.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
index 4fbb3fbdfe7f..16a2f8223cec 100644
--- a/packages/styles/scss/components/multiselect/_multiselect.scss
+++ b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -106,7 +106,6 @@
     visibility: hidden;
   }
 
-  $icon-disabled: $icon-disabled;
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly,
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly:hover {
     background-color: transparent;