SuperSelect - docs for search position (HDS-4254) (#2620)

KristinLBradley · shleewhite · majedelass · web-flow · commit 0b807232d375 · 2025-01-23T11:07:59.000-08:00
Co-authored-by: Lee White &lt;lee.white@hashicorp.com&gt;
Co-authored-by: Majed Elass &lt;majed.elass@hashicorp.com&gt;
diff --git a/website/docs/components/form/super-select/partials/code/component-api.md b/website/docs/components/form/super-select/partials/code/component-api.md
@@ -13,7 +13,12 @@ While the [ember-power-select documentation](https://ember-power-select.com/docs
 
 !!! Info
 
-The default values of some [ember-power-select](https://ember-power-select.com/docs/api-reference) options have been overridden in some cases to either resolve accessibility issues or to customize according to our needs. These options are documented below.
+The default values of some [ember-power-select](https://ember-power-select.com/docs/api-reference) options have been overridden to either resolve accessibility issues or to customize according to our needs.
+
+Overrides to fix accessibility issues:
+
+- `renderInPlace`: Always set as `true`. The opener element or “trigger” must be next to dropdown content it hides & reveals.
+- `searchFieldPosition`: Always set to `"before-options"`. Rendering the search input within the trigger is not compliant because it nests interactive elements within each other.
 
 !!!
 
@@ -72,13 +77,6 @@ The default values of some [ember-power-select](https://ember-power-select.com/d
     <br><br>
     If a value for `dropdownMaxWidth` is set, `matchTriggerWidth` is automatically set to false.
   </C.Property>
-  <C.Property @name="renderInPlace" @type="boolean">
-    Determines whether the dropdown options are rendered in place within the DOM vs. being attached to the root of the HTML `<body>` and positioned with JavaScript.
-    <br><br>
-    Set as `true` in `SuperSelect` components to fix a `PowerSelect` accessibility issue. (The opener element or “trigger” should be next to dropdown content it hides & reveals.)
-    <br><br>
-    <strong>Note</strong>: It cannot be overridden.
-  </C.Property>
   <C.Property @name="searchPlaceholder" @type="string" @default="Search">
     Displays placeholder text in the search input when `@searchEnabled` is set to `true`.
   </C.Property>
@@ -204,13 +202,6 @@ The default values of some [ember-power-select](https://ember-power-select.com/d
     <br><br>
     If a value for `dropdownMaxWidth` is set, `matchTriggerWidth` is automatically set to false.
   </C.Property>
-  <C.Property @name="renderInPlace" @type="boolean">
-    Determines whether the dropdown options are rendered in place within the DOM vs. being attached to the root of the HTML `<body>` and positioned with JavaScript.
-    <br><br>
-    Set as `true` in `SuperSelect` components to fix a `PowerSelect` accessibility issue. (The opener element or “trigger” should be next to dropdown content it hides & reveals.)
-    <br><br>
-    Note: It cannot be overridden.
-  </C.Property>
   <C.Property @name="searchPlaceholder" @type="string" @default="Search">
     Displays placeholder text in the search input when `@searchEnabled` is set to `true`.
     <br><br>
diff --git a/website/docs/components/form/super-select/partials/guidelines/guidelines.md b/website/docs/components/form/super-select/partials/guidelines/guidelines.md
@@ -53,12 +53,6 @@ The before and after options are areas above and below the list, independent fro
 
 BeforeOptions allows for either a search field or generic content to be displayed before the options list.
 
-!!! Warning
-
-Currently, the Multiple component includes search within an area of the trigger instead of displaying it in the beforeOptions. This causes a nested interaction which is an accessibility violation. We are in the process of working with the Ember Power Select maintainers to resolve this issue and make it the same as in the Single component.
-
-!!!
-
 #### Search
 
 If enabled, search allows the user to filter results based on a query.
diff --git a/website/docs/components/form/super-select/partials/version-history/version-history.md b/website/docs/components/form/super-select/partials/version-history/version-history.md
@@ -1,3 +1,10 @@
+## 4.16.0
+
+### Updated
+
+- Updated `ember-power-select` from `8.2.0` to `8.6.0`
+- Added `searchFieldPosition="before-options"` to fix a11y issue in `Multiple` component
+
 ## 4.15.0
 
 Aligned private class properties to follow a standardized notation
