Fix TypeError: Cannot read properties of null (reading 'get_label') at MultiSelect.svelte:75 (#122)

* fix TypeError: Cannot read properties of null (reading 'get_label') at MultiSelect.svelte:75

* readme describe class names in section '### With CSS frameworks'

Author: janosh

readme.md

@@ -220,7 +220,7 @@ import type { Option } from 'svelte-multiselect'
    options: Option[]
    ```
 
-   **The only required prop** (no default). Array of strings/numbers or `Option` objects to be listed in the dropdown. The only required key on objects is `label` which must also be unique. An object's `value` defaults to `label` if `undefined`. You can add arbitrary additional keys to your option objects. A few keys like `preselected` and `title` have special meaning though. See `src/lib/index.ts` for all special keys and their purpose.
+   **The only required prop** (no default). Array of strings/numbers or `Option` objects to be listed in the dropdown. The only required key on objects is `label` which must also be unique. An object's `value` defaults to `label` if `undefined`. You can add arbitrary additional keys to your option objects. A few keys like `preselected` and `title` have special meaning though. See type `ObjectOption` in [`src/lib/index.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) for all special keys and their purpose.
 
 1. ```ts
    outerDiv: HTMLDivElement | null = null
@@ -483,12 +483,12 @@ For example, to change the background color of the options dropdown:
 
 The second method allows you to pass in custom classes to the important DOM elements of this component to target them with frameworks like [Tailwind CSS](https://tailwindcss.com).
 
-- `outerDivClass`
-- `ulSelectedClass`
-- `liSelectedClass`
-- `ulOptionsClass`
-- `liOptionClass`
-- `liActiveOptionClass`
+- `outerDivClass`: wrapper `div` enclosing the whole component
+- `ulSelectedClass`: list of selected options
+- `liSelectedClass`: selected list items
+- `ulOptionsClass`: available options listed in the dropdown when component is in `open` state
+- `liOptionClass`: list items selectable from dropdown list
+- `liActiveOptionClass`: the currently active dropdown list item (i.e. hovered or navigated to with arrow keys)
 
 This simplified version of the DOM structure of the component shows where these classes are inserted:
 

src/lib/MultiSelect.svelte

@@ -81,8 +81,8 @@
   let window_width: number
 
   let wiggle = false // controls wiggle animation when user tries to exceed maxSelect
-  $: selectedLabels = selected.map(get_label)
-  $: selectedValues = selected.map(get_value)
+  $: selectedLabels = selected?.map(get_label) ?? []
+  $: selectedValues = selected?.map(get_value) ?? []
 
   // formValue binds to input.form-control to prevent form submission if required
   // prop is true and no options are selected

tests/unit/multiselect.test.ts

@@ -180,7 +180,7 @@ describe(`MultiSelect`, () => {
   })
 
   // https://github.com/janosh/svelte-multiselect/issues/119
-  test(`invokes callback function on keyup and keydown`, async () => {
+  test(`invokes callback functions on input node DOM events`, async () => {
     const options = [1, 2, 3]
 
     const events: [keyof MultiSelectEvents, Event][] = [