@codecademy/gamut

Index: package/dist/Form/SelectDropdown/elements/containers.js
===================================================================
--- package/dist/Form/SelectDropdown/elements/containers.js
+++ package/dist/Form/SelectDropdown/elements/containers.js
@@ -48,10 +48,25 @@
   const hasHiddenProps = inputProps?.hidden && Object.keys(inputProps.hidden).length > 0;
   const value = rest.hasValue ? rest.getValue().map(({
     value
   }) => value).join(', ') : '';
+
+  /*
+   * `data-*` attributes passed to SelectDropdown reach react-select's
+   * selectProps but are otherwise dropped, since react-select ignores
+   * unknown props. Pick them off selectProps and merge them into the
+   * container's innerProps, same as combobox props in
+   * CustomValueContainer. Scoped to `data-*` only - react-select already
+   * sets its own internal `aria-*` props (e.g. `aria-live`) that shouldn't
+   * be blindly forwarded here.
+   */
+  const dataAttributeProps = Object.fromEntries(Object.entries(rest.selectProps).filter(([key]) => key.startsWith('data-')));
   return /*#__PURE__*/_jsxs(SelectDropdownElements.SelectContainer, {
     ...rest,
+    innerProps: {
+      ...rest.innerProps,
+      ...dataAttributeProps
+    },
     children: [children, hasHiddenProps && /*#__PURE__*/_jsx("input", {
       name: name,
       type: "hidden",
       value: value,