From 4c94f85aed717d32691bde7541ae7e48132b1ce1 Mon Sep 17 00:00:00 2001
From: eyelidlessness <gnosis@gmail.com>
Date: Mon, 13 Jan 2025 15:24:30 -0800
Subject: [PATCH] web-forms (Vue UI): integrate value type suport for selects
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Note that this doesn’t _currently_ do anything special for individual value types! I think that’s expected for the subset of value types we presently implement (which are all represented as primitive values, and all presentable in the current UI controls the same way string values have been). That will necessarily change as we add support for more complex value type representations (e.g. geo).
---
 .../src/fixtures/select/5-select-types.xml    | 187 ++++++++++++++++++
 .../web-forms/src/components/FormQuestion.vue |   4 +-
 .../components/controls/Select1Control.vue    |   8 +-
 .../src/components/controls/SelectControl.vue |   8 +-
 .../components/controls/SelectNControl.vue    |   8 +-
 .../src/components/widgets/CheckboxWidget.vue |  23 ++-
 .../src/components/widgets/LikertWidget.vue   |   8 +-
 .../widgets/MultiselectDropdown.vue           |  16 +-
 .../src/components/widgets/RadioButton.vue    |  21 +-
 .../components/widgets/SearchableDropdown.vue |  16 +-
 .../src/lib/format/selectOptionId.ts          |   5 +
 .../tests/components/FormQuestion.test.ts     |   4 +-
 .../tests/components/SelectControl.test.ts    |  23 ++-
 13 files changed, 268 insertions(+), 63 deletions(-)
 create mode 100644 packages/common/src/fixtures/select/5-select-types.xml
 create mode 100644 packages/web-forms/src/lib/format/selectOptionId.ts

diff --git a/packages/common/src/fixtures/select/5-select-types.xml b/packages/common/src/fixtures/select/5-select-types.xml
new file mode 100644
index 000000000..ec005d468
--- /dev/null
+++ b/packages/common/src/fixtures/select/5-select-types.xml
@@ -0,0 +1,187 @@
+<?xml version="1.0"?>
+<h:html xmlns="http://www.w3.org/2002/xforms" xmlns:h="http://www.w3.org/1999/xhtml"
+  xmlns:jr="http://openrosa.org/javarosa" xmlns:odk="http://www.opendatakit.org/xforms"
+  xmlns:orx="http://openrosa.org/xforms">
+  <h:head>
+    <h:title>Select types</h:title>
+    <model>
+      <instance>
+        <root id="select-types">
+          <select-relevance>yes</select-relevance>
+
+          <sel-1>
+            <string-value>explicit string</string-value>
+            <implicit-string-value>implicit string</implicit-string-value>
+            <int-value>123</int-value>
+            <decimal-value>45.67</decimal-value>
+          </sel-1>
+
+          <sel-n>
+            <string-value>explicit string</string-value>
+            <implicit-string-value>implicit string</implicit-string-value>
+            <int-value>123</int-value>
+            <decimal-value>45.67</decimal-value>
+          </sel-n>
+        </root>
+      </instance>
+      <instance id="strings">
+        <root>
+          <!-- for select1 -->
+          <item>
+            <value>implicit string</value>
+            <label>Implicit String</label>
+          </item>
+          <item>
+            <value>explicit string</value>
+            <label>Explicit String</label>
+          </item>
+          <item>
+            <value>updated string</value>
+            <label>Updated String</label>
+          </item>
+
+          <!-- for select (multiple) -->
+          <item>
+            <value>implicit</value>
+            <label>Implicit</label>
+          </item>
+          <item>
+            <value>explicit</value>
+            <label>Explicit</label>
+          </item>
+          <item>
+            <value>updated</value>
+            <label>Updated</label>
+          </item>
+          <item>
+            <value>string</value>
+            <label>string</label>
+          </item>
+        </root>
+      </instance>
+      <instance id="ints">
+        <root>
+          <item>
+            <value>123</value>
+            <label>123</label>
+          </item>
+          <item>
+            <value>10</value>
+            <label>10</label>
+          </item>
+          <item>
+            <value>23</value>
+            <label>23</label>
+          </item>
+          <item>
+            <value>89</value>
+            <label>89</label>
+          </item>
+        </root>
+      </instance>
+      <instance id="decimals">
+        <root>
+          <item>
+            <value>45.67</value>
+            <label>45.67</label>
+          </item>
+          <item>
+            <value>89</value>
+            <label>89</label>
+          </item>
+          <item>
+            <value>10</value>
+            <label>10</label>
+          </item>
+          <item>
+            <value>23.4</value>
+            <label>23.4</label>
+          </item>
+        </root>
+      </instance>
+      <bind nodeset="/root/sel-1/string-value" type="string"
+        relevant="/root/select-relevance = 'yes'" />
+      <bind nodeset="/root/sel-1/implicit-string-value" relevant="/root/select-relevance = 'yes'" />
+      <bind nodeset="/root/sel-1/int-value" type="int" relevant="/root/select-relevance = 'yes'" />
+      <bind nodeset="/root/sel-1/decimal-value" type="decimal"
+        relevant="/root/select-relevance = 'yes'" />
+      <bind nodeset="/root/sel-n/string-value" type="string"
+        relevant="/root/select-relevance = 'yes'" />
+      <bind nodeset="/root/sel-n/implicit-string-value" relevant="/root/select-relevance = 'yes'" />
+      <bind nodeset="/root/sel-n/int-value" type="int" relevant="/root/select-relevance = 'yes'" />
+      <bind nodeset="/root/sel-n/decimal-value" type="decimal"
+        relevant="/root/select-relevance = 'yes'" />
+    </model>
+  </h:head>
+  <h:body>
+    <select1 ref="/root/select-relevance">
+      <label>All selects relevant?</label>
+      <item>
+        <label>Yes</label>
+        <value>yes</value>
+      </item>
+      <item>
+        <label>No</label>
+        <value>no</value>
+      </item>
+    </select1>
+
+    <group ref="/root/sel-1">
+      <label>Select (1) with types</label>
+
+      <select1 ref="/root/sel-1/string-value">
+        <itemset nodeset="instance('strings')/root/item">
+          <value ref="value" />
+          <label ref="label" />
+        </itemset>
+      </select1>
+      <select1 ref="/root/sel-1/implicit-string-value">
+        <itemset nodeset="instance('strings')/root/item">
+          <value ref="value" />
+          <label ref="label" />
+        </itemset>
+      </select1>
+      <select1 ref="/root/sel-1/int-value">
+        <itemset nodeset="instance('ints')/root/item">
+          <value ref="value" />
+          <label ref="label" />
+        </itemset>
+      </select1>
+      <select1 ref="/root/sel-1/decimal-value">
+        <itemset nodeset="instance('decimals')/root/item">
+          <value ref="value" />
+          <label ref="label" />
+        </itemset>
+      </select1>
+    </group>
+
+    <group ref="/root/sel-n">
+      <label>Select (N) with types</label>
+
+      <select ref="/root/sel-n/string-value">
+        <itemset nodeset="instance('strings')/root/item[not(contains(value, ' '))]">
+          <value ref="value" />
+          <label ref="label" />
+        </itemset>
+      </select>
+      <select ref="/root/sel-n/implicit-string-value">
+        <itemset nodeset="instance('strings')/root/item[not(contains(value, ' '))]">
+          <value ref="value" />
+          <label ref="label" />
+        </itemset>
+      </select>
+      <select ref="/root/sel-n/int-value">
+        <itemset nodeset="instance('ints')/root/item">
+          <value ref="value" />
+          <label ref="label" />
+        </itemset>
+      </select>
+      <select ref="/root/sel-n/decimal-value">
+        <itemset nodeset="instance('decimals')/root/item">
+          <value ref="value" />
+          <label ref="label" />
+        </itemset>
+      </select>
+    </group>
+  </h:body>
+</h:html>
diff --git a/packages/web-forms/src/components/FormQuestion.vue b/packages/web-forms/src/components/FormQuestion.vue
index d5bf0519f..d8ea43bc5 100644
--- a/packages/web-forms/src/components/FormQuestion.vue
+++ b/packages/web-forms/src/components/FormQuestion.vue
@@ -3,8 +3,8 @@ import type {
 	AnyControlNode,
 	AnyInputNode,
 	AnyNoteNode,
+	AnySelectNode,
 	AnyUnsupportedControlNode,
-	SelectNode,
 } from '@getodk/xforms-engine';
 import { inject } from 'vue';
 import InputControl from './controls/Input/InputControl.vue';
@@ -19,7 +19,7 @@ type ControlNode = AnyControlNode | AnyUnsupportedControlNode;
 defineProps<{ question: ControlNode }>();
 
 const isInputNode = (node: ControlNode): node is AnyInputNode => node.nodeType === 'input';
-const isSelectNode = (node: ControlNode): node is SelectNode => node.nodeType === 'select';
+const isSelectNode = (node: ControlNode): node is AnySelectNode => node.nodeType === 'select';
 const isNoteNode = (node: ControlNode): node is AnyNoteNode => node.nodeType === 'note';
 const isRangeNode = (node: ControlNode) => node.nodeType === 'range';
 const isTriggerNode = (node: ControlNode) => node.nodeType === 'trigger';
diff --git a/packages/web-forms/src/components/controls/Select1Control.vue b/packages/web-forms/src/components/controls/Select1Control.vue
index 3aaba66b3..15d58abf1 100644
--- a/packages/web-forms/src/components/controls/Select1Control.vue
+++ b/packages/web-forms/src/components/controls/Select1Control.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { SelectNode } from '@getodk/xforms-engine';
+import type { AnySelectNode } from '@getodk/xforms-engine';
 import { inject, ref } from 'vue';
 import ControlText from '../ControlText.vue';
 import ValidationMessage from '../ValidationMessage.vue';
@@ -10,7 +10,11 @@ import RadioButton from '../widgets/RadioButton.vue';
 import SearchableDropdown from '../widgets/SearchableDropdown.vue';
 import UnsupportedAppearance from './UnsupportedAppearance.vue';
 
-const props = defineProps<{ question: SelectNode }>();
+interface Select1ControlProps {
+	readonly question: AnySelectNode;
+}
+
+const props = defineProps<Select1ControlProps>();
 
 const hasColumnsAppearance =
 	[...props.question.appearances].filter((a) => a.startsWith('columns')).length > 0;
diff --git a/packages/web-forms/src/components/controls/SelectControl.vue b/packages/web-forms/src/components/controls/SelectControl.vue
index 1f1e48ccd..9d60fdc18 100644
--- a/packages/web-forms/src/components/controls/SelectControl.vue
+++ b/packages/web-forms/src/components/controls/SelectControl.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import type { SelectNode } from '@getodk/xforms-engine';
+import type { AnySelectNode } from '@getodk/xforms-engine';
 import Select1Control from './Select1Control.vue';
 import SelectNControl from './SelectNControl.vue';
 
-defineProps<{ question: SelectNode }>();
+interface SelectControlProps {
+	readonly question: AnySelectNode;
+}
+
+defineProps<SelectControlProps>();
 </script>
 
 <template>
diff --git a/packages/web-forms/src/components/controls/SelectNControl.vue b/packages/web-forms/src/components/controls/SelectNControl.vue
index 4862d420e..51363bc20 100644
--- a/packages/web-forms/src/components/controls/SelectNControl.vue
+++ b/packages/web-forms/src/components/controls/SelectNControl.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { SelectNode } from '@getodk/xforms-engine';
+import type { AnySelectNode } from '@getodk/xforms-engine';
 import { inject, ref } from 'vue';
 import ControlText from '../ControlText.vue';
 import ValidationMessage from '../ValidationMessage.vue';
@@ -9,7 +9,11 @@ import CheckboxWidget from '../widgets/CheckboxWidget.vue';
 import MultiselectDropdown from '../widgets/MultiselectDropdown.vue';
 import UnsupportedAppearance from './UnsupportedAppearance.vue';
 
-const props = defineProps<{ question: SelectNode }>();
+interface SelectNControlProps {
+	readonly question: AnySelectNode;
+}
+
+const props = defineProps<SelectNControlProps>();
 
 const hasColumnsAppearance =
 	[...props.question.appearances].filter((a) => a.startsWith('columns')).length > 0;
diff --git a/packages/web-forms/src/components/widgets/CheckboxWidget.vue b/packages/web-forms/src/components/widgets/CheckboxWidget.vue
index e943e0dab..624de1eea 100644
--- a/packages/web-forms/src/components/widgets/CheckboxWidget.vue
+++ b/packages/web-forms/src/components/widgets/CheckboxWidget.vue
@@ -1,17 +1,16 @@
-<script lang="ts" setup>
-import type { SelectNode } from '@getodk/xforms-engine';
+<script lang="ts" setup generic="V extends ValueType">
+import { selectOptionId } from '@/lib/format/selectOptionId.ts';
+import type { SelectNode, SelectValues, ValueType } from '@getodk/xforms-engine';
 import PrimeCheckbox from 'primevue/checkbox';
 
-interface CheckboxWidgetProps {
-	readonly question: SelectNode;
+const props = defineProps<{
+	readonly question: SelectNode<V>;
 	readonly style?: string;
-}
-
-const props = defineProps<CheckboxWidgetProps>();
+}>();
 
 defineEmits(['update:modelValue', 'change']);
 
-const selectValues = (values: readonly string[]) => {
+const selectValues = (values: SelectValues<V>) => {
 	props.question.selectValues(values);
 };
 </script>
@@ -19,16 +18,16 @@ const selectValues = (values: readonly string[]) => {
 <template>
 	<label
 		v-for="option of question.currentState.valueOptions"
-		:key="option.value"
+		:key="option.asString"
 		:class="[{
 			'value-option': true,
-			active: question.currentState.value.find((value) => value === option.value),
+			active: question.isSelected(option.value),
 			disabled: question.currentState.readonly,
 			'no-buttons': question.appearances['no-buttons'] }]"
-		:for="question.nodeId + '_' + option.value"
+		:for="selectOptionId(question, option)"
 	>
 		<PrimeCheckbox
-			:input-id="question.nodeId + '_' + option.value"
+			:input-id="selectOptionId(question, option)"
 			:name="question.nodeId"
 			:value="option.value"
 			:disabled="question.currentState.readonly"
diff --git a/packages/web-forms/src/components/widgets/LikertWidget.vue b/packages/web-forms/src/components/widgets/LikertWidget.vue
index 3aab801d5..f872775f9 100644
--- a/packages/web-forms/src/components/widgets/LikertWidget.vue
+++ b/packages/web-forms/src/components/widgets/LikertWidget.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import type { SelectNode } from '@getodk/xforms-engine';
+import type { AnySelectNode } from '@getodk/xforms-engine';
 import RadioButton from '../widgets/RadioButton.vue';
 
-defineProps<{ question: SelectNode }>();
+interface LikertWidgetProps {
+	readonly question: AnySelectNode;
+}
+
+defineProps<LikertWidgetProps>();
 defineEmits(['change']);
 </script>
 
diff --git a/packages/web-forms/src/components/widgets/MultiselectDropdown.vue b/packages/web-forms/src/components/widgets/MultiselectDropdown.vue
index 4ce5c8092..74fbc5b0d 100644
--- a/packages/web-forms/src/components/widgets/MultiselectDropdown.vue
+++ b/packages/web-forms/src/components/widgets/MultiselectDropdown.vue
@@ -1,14 +1,12 @@
-<script lang="ts" setup>
-import type { SelectNode } from '@getodk/xforms-engine';
+<script lang="ts" setup generic="V extends ValueType">
+import type { SelectItemValue, SelectNode, SelectValues, ValueType } from '@getodk/xforms-engine';
 import PrimeMultiSelect from 'primevue/multiselect';
 import { computed } from 'vue';
 
-interface MultiselectDropdownProps {
-	readonly question: SelectNode;
+const props = defineProps<{
+	readonly question: SelectNode<V>;
 	readonly style?: string;
-}
-
-const props = defineProps<MultiselectDropdownProps>();
+}>();
 
 defineEmits(['update:modelValue', 'change']);
 
@@ -16,11 +14,11 @@ const options = computed(() => {
 	return props.question.currentState.valueOptions.map((option) => option.value);
 });
 
-const selectValues = (values: readonly string[]) => {
+const selectValues = (values: SelectValues<V>) => {
 	props.question.selectValues(values);
 };
 
-const getOptionLabel = (value: string) => {
+const getOptionLabel = (value: SelectItemValue<V>) => {
 	const option = props.question.getValueOption(value);
 
 	if (option == null) {
diff --git a/packages/web-forms/src/components/widgets/RadioButton.vue b/packages/web-forms/src/components/widgets/RadioButton.vue
index 5ad1c8f6e..da59576bf 100644
--- a/packages/web-forms/src/components/widgets/RadioButton.vue
+++ b/packages/web-forms/src/components/widgets/RadioButton.vue
@@ -1,16 +1,15 @@
-<script lang="ts" setup>
-import type { SelectNode } from '@getodk/xforms-engine';
+<script lang="ts" setup generic="V extends ValueType">
+import { selectOptionId } from '@/lib/format/selectOptionId.ts';
+import type { SelectItemValue, SelectNode, ValueType } from '@getodk/xforms-engine';
 import PrimeRadioButton from 'primevue/radiobutton';
 
-interface RadioButtonProps {
-	readonly question: SelectNode;
-}
-
-const props = defineProps<RadioButtonProps>();
+const props = defineProps<{
+	readonly question: SelectNode<V>;
+}>();
 
 defineEmits(['update:modelValue', 'change']);
 
-const selectValue = (value: string) => {
+const selectValue = (value: SelectItemValue<V>) => {
 	props.question.selectValue(value);
 };
 </script>
@@ -18,8 +17,8 @@ const selectValue = (value: string) => {
 <template>
 	<label
 		v-for="option in question.currentState.valueOptions"
-		:key="option.value"
-		:for="question.nodeId + '_' + option.value"
+		:key="option.asString"
+		:for="selectOptionId(question, option)"
 		:class="{
 			'value-option': true,
 			active: question.currentState.value[0] === option.value,
@@ -28,7 +27,7 @@ const selectValue = (value: string) => {
 		}"
 	>
 		<PrimeRadioButton
-			:input-id="question.nodeId + '_' + option.value"
+			:input-id="selectOptionId(question, option)"
 			:value="option.value"
 			:name="question.nodeId"
 			:disabled="question.currentState.readonly"
diff --git a/packages/web-forms/src/components/widgets/SearchableDropdown.vue b/packages/web-forms/src/components/widgets/SearchableDropdown.vue
index 461292c0c..19394c79c 100644
--- a/packages/web-forms/src/components/widgets/SearchableDropdown.vue
+++ b/packages/web-forms/src/components/widgets/SearchableDropdown.vue
@@ -1,14 +1,12 @@
-<script setup lang="ts">
-import type { SelectNode } from '@getodk/xforms-engine';
+<script setup lang="ts" generic="V extends ValueType">
+import type { SelectItemValue, SelectNode, ValueType } from '@getodk/xforms-engine';
 import PrimeDropdown from 'primevue/dropdown';
 import { computed } from 'vue';
 
-interface SearchableDropdownProps {
-	readonly question: SelectNode;
+const props = defineProps<{
+	readonly question: SelectNode<V>;
 	readonly style?: string;
-}
-
-const props = defineProps<SearchableDropdownProps>();
+}>();
 
 defineEmits(['update:modelValue', 'change']);
 
@@ -16,11 +14,11 @@ const options = computed(() => {
 	return props.question.currentState.valueOptions.map((option) => option.value);
 });
 
-const selectValue = (value: string) => {
+const selectValue = (value: SelectItemValue<V>) => {
 	props.question.selectValue(value);
 };
 
-const getOptionLabel = (value: string) => {
+const getOptionLabel = (value: SelectItemValue<V>) => {
 	const option = props.question.getValueOption(value);
 
 	if (option == null) {
diff --git a/packages/web-forms/src/lib/format/selectOptionId.ts b/packages/web-forms/src/lib/format/selectOptionId.ts
new file mode 100644
index 000000000..c8a0186a1
--- /dev/null
+++ b/packages/web-forms/src/lib/format/selectOptionId.ts
@@ -0,0 +1,5 @@
+import type { SelectItem, SelectNode, ValueType } from '@getodk/xforms-engine';
+
+export const selectOptionId = (node: SelectNode, optionItem: SelectItem<ValueType>): string => {
+	return `${node.nodeId}_${optionItem.asString}`;
+};
diff --git a/packages/web-forms/tests/components/FormQuestion.test.ts b/packages/web-forms/tests/components/FormQuestion.test.ts
index d025a966b..917fc5954 100644
--- a/packages/web-forms/tests/components/FormQuestion.test.ts
+++ b/packages/web-forms/tests/components/FormQuestion.test.ts
@@ -1,7 +1,7 @@
 import InputControl from '@/components/controls/Input/InputControl.vue';
 import SelectControl from '@/components/controls/SelectControl.vue';
 import UnsupportedControl from '@/components/controls/UnsupportedControl.vue';
-import type { SelectNode } from '@getodk/xforms-engine';
+import type { AnySelectNode } from '@getodk/xforms-engine';
 import { mount } from '@vue/test-utils';
 import { describe, expect, it } from 'vitest';
 import FormQuestion from '../../src/components/FormQuestion.vue';
@@ -12,7 +12,7 @@ const mountComponent = async (formPath: string, questionNumber: number) => {
 
 	return mount(FormQuestion, {
 		props: {
-			question: xform.currentState.children[questionNumber] as SelectNode,
+			question: xform.currentState.children[questionNumber] as AnySelectNode,
 		},
 		global: globalMountOptions,
 	});
diff --git a/packages/web-forms/tests/components/SelectControl.test.ts b/packages/web-forms/tests/components/SelectControl.test.ts
index ee72f9dcb..d700a105c 100644
--- a/packages/web-forms/tests/components/SelectControl.test.ts
+++ b/packages/web-forms/tests/components/SelectControl.test.ts
@@ -1,10 +1,10 @@
 import SelectControl from '@/components/controls/SelectControl.vue';
-import type { AnyNode, RootNode, SelectNode } from '@getodk/xforms-engine';
+import type { AnyNode, AnySelectNode, RootNode } from '@getodk/xforms-engine';
 import { DOMWrapper, mount } from '@vue/test-utils';
 import { assert, beforeEach, describe, expect, it } from 'vitest';
 import { getReactiveForm, globalMountOptions } from '../helpers.ts';
 
-const findSelectNodeByReference = (node: AnyNode, reference: string): SelectNode | null => {
+const findSelectNodeByReference = (node: AnyNode, reference: string): AnySelectNode | null => {
 	const nodeReference = node.currentState.reference;
 
 	if (nodeReference === reference) {
@@ -26,7 +26,7 @@ const findSelectNodeByReference = (node: AnyNode, reference: string): SelectNode
 	return null;
 };
 
-const getSelectNodeByReference = (root: RootNode, reference: string): SelectNode => {
+const getSelectNodeByReference = (root: RootNode, reference: string): AnySelectNode => {
 	const result = findSelectNodeByReference(root, reference);
 
 	assert(result != null);
@@ -40,7 +40,7 @@ interface MountComponentOptions {
 
 type MountedComponent = ReturnType<typeof mountComponent>;
 
-const mountComponent = (selectNode: SelectNode, options?: MountComponentOptions) => {
+const mountComponent = (selectNode: AnySelectNode, options?: MountComponentOptions) => {
 	const { submitPressed = false } = options ?? {};
 
 	return mount(SelectControl, {
@@ -55,7 +55,10 @@ const mountComponent = (selectNode: SelectNode, options?: MountComponentOptions)
 	});
 };
 
-const expectSelectedValuesState = (selectNode: SelectNode, expectedValues: readonly string[]) => {
+const expectSelectedValuesState = (
+	selectNode: AnySelectNode,
+	expectedValues: readonly string[]
+) => {
 	const actualValues = selectNode.currentState.value;
 
 	expect(actualValues.length).toBe(expectedValues.length);
@@ -65,7 +68,7 @@ const expectSelectedValuesState = (selectNode: SelectNode, expectedValues: reado
 	}
 };
 
-const expectSelectedValueState = (selectNode: SelectNode, value: string | null) => {
+const expectSelectedValueState = (selectNode: AnySelectNode, value: string | null) => {
 	if (value == null) {
 		return expectSelectedValuesState(selectNode, []);
 	}
@@ -119,7 +122,7 @@ describe('SelectControl', () => {
 	describe('select1', () => {
 		describe('no appearance (radio controls)', () => {
 			let root: RootNode;
-			let selectNode: SelectNode;
+			let selectNode: AnySelectNode;
 			let component: MountedComponent;
 			let cherry: DOMWrapper<HTMLInputElement>;
 			let mango: DOMWrapper<HTMLInputElement>;
@@ -167,7 +170,7 @@ describe('SelectControl', () => {
 			{ appearance: 'minimal search', reference: '/data/minimal_search' },
 		])('dropdown with appearance: $appearance', ({ reference }) => {
 			let root: RootNode;
-			let selectNode: SelectNode;
+			let selectNode: AnySelectNode;
 			let component: MountedComponent;
 			let controlElement: DOMWrapper<HTMLDivElement>;
 
@@ -220,7 +223,7 @@ describe('SelectControl', () => {
 	describe('select', () => {
 		describe('no appearance (checkbox controls)', () => {
 			let root: RootNode;
-			let selectNode: SelectNode;
+			let selectNode: AnySelectNode;
 			let component: MountedComponent;
 			let watermelon: DOMWrapper<HTMLInputElement>;
 			let peach: DOMWrapper<HTMLInputElement>;
@@ -274,7 +277,7 @@ describe('SelectControl', () => {
 			{ appearance: 'minimal search', reference: '/data/minimal_search_m' },
 		])('dropdown with appearance: $appearance', ({ reference }) => {
 			let root: RootNode;
-			let selectNode: SelectNode;
+			let selectNode: AnySelectNode;
 			let component: MountedComponent;
 			let controlElement: DOMWrapper<HTMLDivElement>;