From 43813ef933f4d968045562a0783b64afe59e6aed Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 12 Jul 2021 18:47:07 +0100
Subject: [PATCH 1/3] Allow extra attrs provided to `<Select>` to be passed
 through to the DOM element

---
 js/src/common/components/Select.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/js/src/common/components/Select.js b/js/src/common/components/Select.js
index d4cfab4fa2..1acf92d7be 100644
--- a/js/src/common/components/Select.js
+++ b/js/src/common/components/Select.js
@@ -1,6 +1,7 @@
 import Component from '../Component';
 import icon from '../helpers/icon';
 import withAttr from '../utils/withAttr';
+import classList from '../utils/classList';
 
 /**
  * The `Select` component displays a <select> input, surrounded with some extra
@@ -10,18 +11,22 @@ import withAttr from '../utils/withAttr';
  * - `onchange` A callback to run when the selected value is changed.
  * - `value` The value of the selected option.
  * - `disabled` Disabled state for the input.
+ * - `outerClassName` class given to the containing Select element
+ *
+ * Other attributes are passed directly to the `<select>` element rendered to the DOM.
  */
 export default class Select extends Component {
   view() {
-    const { options, onchange, value, disabled } = this.attrs;
+    const { options, onchange, value, disabled, outerClassName, ...domAttrs } = this.attrs;
 
     return (
-      <span className="Select">
+      <span className={classList('Select', outerClassName)}>
         <select
           className="Select-input FormControl"
           onchange={onchange ? withAttr('value', onchange.bind(this)) : undefined}
           value={value}
           disabled={disabled}
+          {...domAttrs}
         >
           {Object.keys(options).map((key) => (
             <option value={key}>{options[key]}</option>

From 2910555420fa1ba0076263634ad51061552eefb0 Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 12 Jul 2021 19:33:34 +0100
Subject: [PATCH 2/3] Allow direct passing attrs to the Select wrapper

---
 js/src/common/components/Select.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/js/src/common/components/Select.js b/js/src/common/components/Select.js
index 1acf92d7be..36f57186d9 100644
--- a/js/src/common/components/Select.js
+++ b/js/src/common/components/Select.js
@@ -11,16 +11,30 @@ import classList from '../utils/classList';
  * - `onchange` A callback to run when the selected value is changed.
  * - `value` The value of the selected option.
  * - `disabled` Disabled state for the input.
- * - `outerClassName` class given to the containing Select element
+ * - `wrapperAttrs` A map of attrs to be passed to the DOM element wrapping the `<select>`
  *
  * Other attributes are passed directly to the `<select>` element rendered to the DOM.
  */
 export default class Select extends Component {
   view() {
-    const { options, onchange, value, disabled, outerClassName, ...domAttrs } = this.attrs;
+    const {
+      options,
+      onchange,
+      value,
+      disabled,
+
+      // Destructure the `wrapperAttrs` object to extract the `className` for passing to `classList()`
+      // `= {}` prevents errors when `wrapperAttrs` is undefined
+      wrapperAttrs: {
+        className: wrapperClassName,
+        ...wrapperAttrs
+      } = {},
+
+      ...domAttrs
+    } = this.attrs;
 
     return (
-      <span className={classList('Select', outerClassName)}>
+      <span className={classList('Select', wrapperClassName)} {...wrapperAttrs}>
         <select
           className="Select-input FormControl"
           onchange={onchange ? withAttr('value', onchange.bind(this)) : undefined}

From b03be66720c29c1ee68a81c0b9e3ec15b075d34c Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Mon, 12 Jul 2021 19:40:40 +0100
Subject: [PATCH 3/3] Format

---
 js/src/common/components/Select.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/js/src/common/components/Select.js b/js/src/common/components/Select.js
index 36f57186d9..4e6ca8e32c 100644
--- a/js/src/common/components/Select.js
+++ b/js/src/common/components/Select.js
@@ -25,10 +25,7 @@ export default class Select extends Component {
 
       // Destructure the `wrapperAttrs` object to extract the `className` for passing to `classList()`
       // `= {}` prevents errors when `wrapperAttrs` is undefined
-      wrapperAttrs: {
-        className: wrapperClassName,
-        ...wrapperAttrs
-      } = {},
+      wrapperAttrs: { className: wrapperClassName, ...wrapperAttrs } = {},
 
       ...domAttrs
     } = this.attrs;