Support passing a Signal for Select initialValue prop.

Enable the `initialValue` to be re-set reactively in response to
a signal changing. This is useful for providing 'reset
form' functionality for example.

For #12

Author: martinpengellyphillips

CHANGELOG.md

@@ -8,6 +8,21 @@
   displayed when there are no options available. Defaults to `No options`.
   Thanks to [@raskyer](https://github.com/raskyer) for this contribution.
 
+- The `initialValue` prop of the `Select` component can now be a Signal in order
+  to support reactively re-setting the initial value of the component. This is
+  useful for providing 'reset form' functionality for example.
+
+  ```jsx
+  const [initialValue, setInitialValue] = createSignal(null, { equals: false });
+
+  <Select
+    initialValue={initialValue}
+    options={["apple", "banana", "pear", "pineapple", "kiwi"]}
+  />
+
+  <button onClick={() => setInitialValue(null)}>Reset</button>
+  ```
+
 ## [0.9.0] - 2022-04-09
 
 ### Added

src/select.tsx

@@ -6,6 +6,7 @@ import {
   Component,
   JSXElement,
   createEffect,
+  on,
 } from "solid-js";
 
 import {
@@ -52,7 +53,6 @@ const Select = (props: SelectProps) => {
       "options",
       "optionToValue",
       "isOptionDisabled",
-      "initialValue",
       "multiple",
       "disabled",
       "onInput",
@@ -62,6 +62,14 @@ const Select = (props: SelectProps) => {
   );
   const select = createSelect(selectProps);
 
+  if (local.initialValue !== undefined) {
+    if (typeof local.initialValue === "function") {
+      createEffect(on(local.initialValue, (value) => select.setValue(value)));
+    } else {
+      select.setValue(local.initialValue);
+    }
+  }
+
   return (
     <Container
       class={local.class}