From abbc22a9876bc9ecee70b54ca616a187cc5d0952 Mon Sep 17 00:00:00 2001
From: Tony Ward <8069555+ynotdraw@users.noreply.github.com>
Date: Tue, 11 Jul 2023 08:10:34 -0400
Subject: [PATCH] Implemented suggestions

Co-authored-by: nicolechung <771170+nicolechung@users.noreply.github.com>
---
 docs/components/combobox/index.md                      | 10 +++++++++-
 .../src/components/form/controls/combobox.hbs          |  2 +-
 .../integration/components/combobox-field-test.gts     |  2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/components/combobox/index.md b/docs/components/combobox/index.md
index 613895bf7..e4b8243e7 100644
--- a/docs/components/combobox/index.md
+++ b/docs/components/combobox/index.md
@@ -3,7 +3,7 @@
 Provides a Toucan-styled combobox with filtering.
 If you are building forms, you may be interested in the ComboboxField component instead.
 
-## Content Class
+## Popover z-index
 
 A CSS class to add to this component's content container. Commonly used to specify a `z-index`.
 
@@ -11,6 +11,14 @@ A CSS class to add to this component's content container. Commonly used to speci
 <Form::Controls::Combobox @contentClass='z-50' />
 ```
 
+Another option to set the z-index of the popover is to set the `--z-index-popover` CSS variable.
+
+```css
+:root {
+  --z-index-popover: 9999;
+}
+```
+
 ## Options
 
 `@options` forms the content of this component. To support a variety of data shapes, `@options` is typed as `unknown[]` and treated as though it were opaque. `@options` is simply iterated over then passed back to you as a block parameter (`combobox.option`).
diff --git a/packages/ember-toucan-core/src/components/form/controls/combobox.hbs b/packages/ember-toucan-core/src/components/form/controls/combobox.hbs
index 8c6eae6b9..b74d54c8a 100644
--- a/packages/ember-toucan-core/src/components/form/controls/combobox.hbs
+++ b/packages/ember-toucan-core/src/components/form/controls/combobox.hbs
@@ -70,7 +70,7 @@
 
   {{#if this.isPopoverOpen}}
     <ul
-      class="border-surface-inner bg-surface-2xl max-h-listbox my-0 list-none overflow-y-auto overscroll-contain rounded-sm border py-1 pl-0 shadow-xl
+      class="border-surface-inner bg-surface-2xl max-h-listbox z-popover my-0 list-none overflow-y-auto overscroll-contain rounded-sm border py-1 pl-0 shadow-xl
         {{if @contentClass @contentClass}}"
       id={{this.popoverId}}
       role="listbox"
diff --git a/test-app/tests/integration/components/combobox-field-test.gts b/test-app/tests/integration/components/combobox-field-test.gts
index 8255fdd9c..62e77db58 100644
--- a/test-app/tests/integration/components/combobox-field-test.gts
+++ b/test-app/tests/integration/components/combobox-field-test.gts
@@ -27,7 +27,7 @@ module('Integration | Component | Fields | Combobox', function (hooks) {
     assert
       .dom('[data-error]')
       .doesNotExist(
-        'Expected hint block not to be displayed as an error was not provided'
+        'Expected hint block not to be displayed as an error or @hint was not provided'
       );
 
     assert.dom('[data-lock-icon]').doesNotExist();