diff --git a/library/core/components/option-node.ts b/library/core/components/option-node.ts
index c913a0f..4090b9e 100644
--- a/library/core/components/option-node.ts
+++ b/library/core/components/option-node.ts
@@ -5,7 +5,7 @@ import type { OptionProps } from "./option"
 export class OptionNode extends Node<OptionProps> {
   get options(): MessageSelectOptionOptions {
     return {
-      label: this.props.children || this.props.label || this.props.value || "",
+      label: this.props.children || this.props.label || this.props.value,
       value: this.props.value,
       description: this.props.description,
       emoji: this.props.emoji,
diff --git a/library/internal/text-node.ts b/library/internal/text-node.ts
index a4baeeb..973b253 100644
--- a/library/internal/text-node.ts
+++ b/library/internal/text-node.ts
@@ -3,6 +3,6 @@ import { Node } from "./node.js"
 
 export class TextNode extends Node<string> {
   override modifyMessageOptions(options: MessageOptions) {
-    options.content = (options.content ?? "") + this.props
+    options.content = options.content + this.props
   }
 }
diff --git a/package.json b/package.json
index 83938e7..6abe27d 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
   },
   "devDependencies": {
     "@itsmapleleaf/configs": "^1.1.2",
+    "@jest/globals": "^27.4.4",
     "@types/jest": "^27.0.3",
     "@types/lodash-es": "^4.17.5",
     "@typescript-eslint/eslint-plugin": "^5.8.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b731a62..adbec05 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,7 @@ importers:
   .:
     specifiers:
       '@itsmapleleaf/configs': ^1.1.2
+      '@jest/globals': ^27.4.4
       '@types/jest': ^27.0.3
       '@types/lodash-es': ^4.17.5
       '@types/node': '*'
@@ -50,6 +51,7 @@ importers:
       rxjs: 7.4.0
     devDependencies:
       '@itsmapleleaf/configs': 1.1.2
+      '@jest/globals': 27.4.4
       '@types/jest': 27.0.3
       '@types/lodash-es': 4.17.5
       '@typescript-eslint/eslint-plugin': 5.8.0_836011a006f4f5d67178564baf2b6d34
diff --git a/test/select.test.tsx b/test/select.test.tsx
index 58fa1a0..c8f0a0d 100644
--- a/test/select.test.tsx
+++ b/test/select.test.tsx
@@ -1,10 +1,13 @@
+import { jest } from "@jest/globals"
 import React, { useState } from "react"
 import { Button, Option, Select } from "../library/main"
 import { setupReacordTesting } from "./setup-testing"
 
-const { adapter, reply, assertMessages } = setupReacordTesting()
+const { adapter, reply, assertRender, assertMessages } = setupReacordTesting()
 
 test("single select", async () => {
+  const onSelect = jest.fn()
+
   function TestSelect() {
     const [value, setValue] = useState<string>()
     const [disabled, setDisabled] = useState(false)
@@ -13,11 +16,12 @@ test("single select", async () => {
         <Select
           placeholder="choose one"
           value={value}
+          onSelect={onSelect}
           onSelectValue={setValue}
           disabled={disabled}
         >
-          <Option value="1">one</Option>
-          <Option value="2">two</Option>
+          <Option value="1" />
+          <Option value="2" label="two" />
           <Option value="3">three</Option>
         </Select>
         <Button label="disable" onClick={() => setDisabled(true)} />
@@ -25,108 +29,50 @@ test("single select", async () => {
     )
   }
 
-  reply.render(<TestSelect />)
-
-  await assertMessages([
-    {
-      content: "",
-      embeds: [],
-      actionRows: [
-        [
-          {
-            type: "select",
-            placeholder: "choose one",
-            values: [],
-            disabled: false,
-            options: [
-              { label: "one", value: "1" },
-              { label: "two", value: "2" },
-              { label: "three", value: "3" },
-            ],
-          },
+  async function assertSelect(values: string[], disabled = false) {
+    await assertMessages([
+      {
+        content: "",
+        embeds: [],
+        actionRows: [
+          [
+            {
+              type: "select",
+              placeholder: "choose one",
+              values,
+              disabled,
+              options: [
+                { label: "1", value: "1" },
+                { label: "two", value: "2" },
+                { label: "three", value: "3" },
+              ],
+            },
+          ],
+          [{ type: "button", style: "secondary", label: "disable" }],
         ],
-        [{ type: "button", style: "secondary", label: "disable" }],
-      ],
-    },
-  ])
+      },
+    ])
+  }
+
+  reply.render(<TestSelect />)
+  await assertSelect([])
+  expect(onSelect).toHaveBeenCalledTimes(0)
 
   adapter.findSelectByPlaceholder("choose one").select("2")
-
-  await assertMessages([
-    {
-      content: "",
-      embeds: [],
-      actionRows: [
-        [
-          {
-            type: "select",
-            placeholder: "choose one",
-            values: ["2"],
-            disabled: false,
-            options: [
-              { label: "one", value: "1" },
-              { label: "two", value: "2" },
-              { label: "three", value: "3" },
-            ],
-          },
-        ],
-        [{ type: "button", style: "secondary", label: "disable" }],
-      ],
-    },
-  ])
+  await assertSelect(["2"])
+  expect(onSelect).toHaveBeenCalledWith({ values: ["2"] })
 
   adapter.findButtonByLabel("disable").click()
-
-  await assertMessages([
-    {
-      content: "",
-      embeds: [],
-      actionRows: [
-        [
-          {
-            type: "select",
-            placeholder: "choose one",
-            values: ["2"],
-            disabled: true,
-            options: [
-              { label: "one", value: "1" },
-              { label: "two", value: "2" },
-              { label: "three", value: "3" },
-            ],
-          },
-        ],
-        [{ type: "button", style: "secondary", label: "disable" }],
-      ],
-    },
-  ])
+  await assertSelect(["2"], true)
 
   adapter.findSelectByPlaceholder("choose one").select("1")
-
-  await assertMessages([
-    {
-      content: "",
-      embeds: [],
-      actionRows: [
-        [
-          {
-            type: "select",
-            placeholder: "choose one",
-            values: ["2"],
-            disabled: true,
-            options: [
-              { label: "one", value: "1" },
-              { label: "two", value: "2" },
-              { label: "three", value: "3" },
-            ],
-          },
-        ],
-        [{ type: "button", style: "secondary", label: "disable" }],
-      ],
-    },
-  ])
+  await assertSelect(["2"], true)
+  expect(onSelect).toHaveBeenCalledTimes(1)
 })
 
 test("multiple select", async () => {
+  const onSelect = jest.fn()
+
   function TestSelect() {
     const [values, setValues] = useState<string[]>([])
     return (
@@ -134,6 +80,7 @@ test("multiple select", async () => {
         placeholder="select"
         multiple
         values={values}
+        onSelect={onSelect}
         onSelectMultiple={setValues}
       >
         <Option value="1">one</Option>
@@ -143,102 +90,61 @@ test("multiple select", async () => {
     )
   }
 
-  reply.render(<TestSelect />)
-
-  await assertMessages([
-    {
-      content: "",
-      embeds: [],
-      actionRows: [
-        [
-          {
-            type: "select",
-            placeholder: "select",
-            values: [],
-            minValues: 0,
-            maxValues: 25,
-            options: [
-              { label: "one", value: "1" },
-              { label: "two", value: "2" },
-              { label: "three", value: "3" },
-            ],
-          },
+  async function assertSelect(values: string[]) {
+    await assertMessages([
+      {
+        content: "",
+        embeds: [],
+        actionRows: [
+          [
+            {
+              type: "select",
+              placeholder: "select",
+              values,
+              minValues: 0,
+              maxValues: 25,
+              options: [
+                { label: "one", value: "1" },
+                { label: "two", value: "2" },
+                { label: "three", value: "3" },
+              ],
+            },
+          ],
         ],
-      ],
-    },
-  ])
+      },
+    ])
+  }
+
+  reply.render(<TestSelect />)
+  await assertSelect([])
+  expect(onSelect).toHaveBeenCalledTimes(0)
 
   adapter.findSelectByPlaceholder("select").select("1", "3")
-
-  await assertMessages([
-    {
-      content: "",
-      embeds: [],
-      actionRows: [
-        [
-          {
-            type: "select",
-            placeholder: "select",
-            values: expect.arrayContaining(["1", "3"]),
-            minValues: 0,
-            maxValues: 25,
-            options: [
-              { label: "one", value: "1" },
-              { label: "two", value: "2" },
-              { label: "three", value: "3" },
-            ],
-          },
-        ],
-      ],
-    },
-  ])
+  await assertSelect(expect.arrayContaining(["1", "3"]))
+  expect(onSelect).toHaveBeenCalledWith({
+    values: expect.arrayContaining(["1", "3"]),
+  })
 
   adapter.findSelectByPlaceholder("select").select("2")
-
-  await assertMessages([
-    {
-      content: "",
-      embeds: [],
-      actionRows: [
-        [
-          {
-            type: "select",
-            placeholder: "select",
-            values: ["2"],
-            minValues: 0,
-            maxValues: 25,
-            options: [
-              { label: "one", value: "1" },
-              { label: "two", value: "2" },
-              { label: "three", value: "3" },
-            ],
-          },
-        ],
-      ],
-    },
-  ])
+  await assertSelect(expect.arrayContaining(["2"]))
+  expect(onSelect).toHaveBeenCalledWith({
+    values: expect.arrayContaining(["2"]),
+  })
 
   adapter.findSelectByPlaceholder("select").select()
+  await assertSelect([])
+  expect(onSelect).toHaveBeenCalledWith({ values: [] })
+})
 
+test("optional onSelect + unknown value", async () => {
+  reply.render(<Select placeholder="select" />)
+  adapter.findSelectByPlaceholder("select").select("something")
   await assertMessages([
     {
       content: "",
       embeds: [],
       actionRows: [
-        [
-          {
-            type: "select",
-            placeholder: "select",
-            values: [],
-            minValues: 0,
-            maxValues: 25,
-            options: [
-              { label: "one", value: "1" },
-              { label: "two", value: "2" },
-              { label: "three", value: "3" },
-            ],
-          },
-        ],
+        [{ type: "select", placeholder: "select", options: [], values: [] }],
       ],
     },
   ])