From ab7a3e72124088d07cf6015af47a1a95990055d6 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Wed, 28 Jul 2021 09:48:21 -0500
Subject: [PATCH] fix(multiselect): field-02 background color when placed
 inside modal (#9328)

* fix(multiselect): correct background color when placed inside modal

* chore: modify throwaway story example

* chore: modify throwaway story example

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/modal/_modal.scss          |  3 ++-
 .../react/src/components/Modal/Modal-story.js | 26 +++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
index 76c27b111e2d..98283795a1bd 100644
--- a/packages/components/src/components/modal/_modal.scss
+++ b/packages/components/src/components/modal/_modal.scss
@@ -55,7 +55,8 @@
     .#{$prefix}--dropdown,
     .#{$prefix}--dropdown-list,
     .#{$prefix}--number input[type='number'],
-    .#{$prefix}--date-picker__input {
+    .#{$prefix}--date-picker__input,
+    .#{$prefix}--multi-select {
       background-color: $field-02;
     }
   }
diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
index 69cc41674d31..61351855588c 100644
--- a/packages/react/src/components/Modal/Modal-story.js
+++ b/packages/react/src/components/Modal/Modal-story.js
@@ -19,6 +19,8 @@ import {
 import Modal from '../Modal';
 import Button from '../Button';
 import Select from '../Select';
+import MultiSelect from '../MultiSelect';
+import Dropdown from '../Dropdown';
 import SelectItem from '../SelectItem';
 import TextInput from '../TextInput';
 import mdx from './Modal.mdx';
@@ -161,6 +163,30 @@ export const Default = () => {
         <SelectItem value="us-south" text="US South" />
         <SelectItem value="us-east" text="US East" />
       </Select>
+      <Dropdown
+        id="drop"
+        label="Dropdown"
+        titleText="Dropdown"
+        items={[
+          { id: 'one', label: 'one', name: 'one' },
+          { id: 'two', label: 'two', name: 'two' },
+        ]}
+      />
+      <MultiSelect
+        id="test"
+        label="Multiselect"
+        items={[
+          {
+            id: 'downshift-1-item-0',
+            text: 'Option 1',
+          },
+          {
+            id: 'downshift-1-item-1',
+            text: 'Option 2',
+          },
+        ]}
+        itemToString={(item) => (item ? item.text : '')}
+      />
     </Modal>
   );
 };