Create HTMLOptionsCollection to improve ux when dealing with <select><option>

Author: ghostbuster91

api-reports/2_12.txt

@@ -9187,6 +9187,10 @@ HTMLOptionElement[JC] var text: String
 HTMLOptionElement[JC] var textContent: String
 HTMLOptionElement[JC] var title: String
 HTMLOptionElement[JC] var value: String
+HTMLOptionsCollection[JC] @JSBracketAccess def apply(index: Int): T
+HTMLOptionsCollection[JC] def item(index: Int): HTMLOptionElement
+HTMLOptionsCollection[JC] def length: Int
+HTMLOptionsCollection[JC] def namedItem(name: String): HTMLOptionElement
 HTMLParagraphElement[JC] var accessKey: String
 HTMLParagraphElement[JC] def addEventListener[T <: Event](`type`: String, listener: js.Function1[T, _], options: EventListenerOptions): Unit
 HTMLParagraphElement[JC] def addEventListener[T <: Event](`type`: String, listener: js.Function1[T, _], useCapture: Boolean?): Unit
@@ -10552,7 +10556,7 @@ HTMLSelectElement[JC] var ontimeupdate: js.Function1[Event, _]
 HTMLSelectElement[JC] var onvolumechange: js.Function1[Event, _]
 HTMLSelectElement[JC] var onwaiting: js.Function1[Event, _]
 HTMLSelectElement[JC] var onwheel: js.Function1[WheelEvent, _]
-HTMLSelectElement[JC] val options: js.Array[HTMLOptionElement]
+HTMLSelectElement[JC] val options: HTMLOptionsCollection
 HTMLSelectElement[JC] var outerHTML: String
 HTMLSelectElement[JC] def ownerDocument: Document
 HTMLSelectElement[JC] override def ownerDocument: HTMLDocument

api-reports/2_13.txt

@@ -9187,6 +9187,10 @@ HTMLOptionElement[JC] var text: String
 HTMLOptionElement[JC] var textContent: String
 HTMLOptionElement[JC] var title: String
 HTMLOptionElement[JC] var value: String
+HTMLOptionsCollection[JC] @JSBracketAccess def apply(index: Int): T
+HTMLOptionsCollection[JC] def item(index: Int): HTMLOptionElement
+HTMLOptionsCollection[JC] def length: Int
+HTMLOptionsCollection[JC] def namedItem(name: String): HTMLOptionElement
 HTMLParagraphElement[JC] var accessKey: String
 HTMLParagraphElement[JC] def addEventListener[T <: Event](`type`: String, listener: js.Function1[T, _], options: EventListenerOptions): Unit
 HTMLParagraphElement[JC] def addEventListener[T <: Event](`type`: String, listener: js.Function1[T, _], useCapture: Boolean?): Unit
@@ -10552,7 +10556,7 @@ HTMLSelectElement[JC] var ontimeupdate: js.Function1[Event, _]
 HTMLSelectElement[JC] var onvolumechange: js.Function1[Event, _]
 HTMLSelectElement[JC] var onwaiting: js.Function1[Event, _]
 HTMLSelectElement[JC] var onwheel: js.Function1[WheelEvent, _]
-HTMLSelectElement[JC] val options: js.Array[HTMLOptionElement]
+HTMLSelectElement[JC] val options: HTMLOptionsCollection
 HTMLSelectElement[JC] var outerHTML: String
 HTMLSelectElement[JC] def ownerDocument: Document
 HTMLSelectElement[JC] override def ownerDocument: HTMLDocument

src/main/scala/org/scalajs/dom/HTMLOptionsCollection.scala

@@ -0,0 +1,26 @@
+/** All documentation for facades is thanks to Mozilla Contributors at https://developer.mozilla.org/en-US/docs/Web/API
+  * and available under the Creative Commons Attribution-ShareAlike v2.5 or later.
+  * http://creativecommons.org/licenses/by-sa/2.5/
+  *
+  * Everything else is under the MIT License http://opensource.org/licenses/MIT
+  */
+package org.scalajs.dom
+
+import scala.scalajs.js
+import scala.scalajs.js.annotation._
+
+/** The HTMLOptionsCollection interface represents a collection of <option> HTML elements (in document order) and offers
+  * methods and properties for selecting from the list as well as optionally altering its items. This object is returned
+  * only by the options property of select.
+  */
+@js.native
+@JSGlobal
+class HTMLOptionsCollection private[this] () extends DOMList[HTMLOptionElement] {
+  def item(index: Int): HTMLOptionElement = js.native
+
+  /** Returns the specific node whose ID or, as a fallback, name matches the string specified by name. Matching by name
+    * is only done as a last resort, only in HTML, and only if the referenced element supports the name attribute.
+    * Returns null if no node exists by the given name.
+    */
+  def namedItem(name: String): HTMLOptionElement = js.native
+}

src/main/scala/org/scalajs/dom/HTMLSelectElement.scala

@@ -17,7 +17,7 @@ import scala.scalajs.js.annotation._
 abstract class HTMLSelectElement extends HTMLElement {
 
   /** The set of <option> elements contained by this element. Read only. */
-  val options: js.Array[HTMLOptionElement] = js.native
+  val options: HTMLOptionsCollection = js.native
 
   /** The value of this form control, that is, of the first selected option. */
   var value: String = js.native