Add chromedash-select to fix sl-select bug (#1944)

* Add chromedash-select to fix sl-select bug

* Add TODO about removing the subclass after shoelace deploys the fix.

static/components.js

@@ -39,6 +39,7 @@ import './elements/chromedash-metadata';
 import './elements/chromedash-metrics';
 import './elements/chromedash-myfeatures';
 import './elements/chromedash-process-overview';
+import './elements/chromedash-select';
 import './elements/chromedash-textarea';
 import './elements/chromedash-timeline';
 import './elements/chromedash-toast';

static/elements/chromedash-select.js

@@ -0,0 +1,13 @@
+// TODO Remove this once the shoelace fix is part of a new shoelace version.
+// See https://github.com/shoelace-style/shoelace/commit/624a8bbe71e59ae6255730e34d71e0b13d5ecf90
+
+import SlSelect from '@shoelace-style/shoelace/dist/components/select/select.js';
+
+export class ChromedashSelect extends SlSelect {
+  resizeMenu() {
+    this.menu.style.width = `${this.control.clientWidth}px`;
+    requestAnimationFrame(() => this.dropdown.reposition());
+  }
+}
+
+customElements.define('chromedash-select', ChromedashSelect);

templates/django/forms/widgets/select.html

@@ -1,4 +1,4 @@
-<sl-select
+<chromedash-select 
     name="{{ widget.name }}"
     size="small"
     value="{{ widget.value|first }}"
@@ -14,4 +14,4 @@
     </optgroup>
     {% endif %}
   {% endfor %}
-</sl-select>
+</chromedash-select>