FIX: MidiValueInput

src/renderer/src/components/config/values/ControlMidiValue.vue

@@ -3,18 +3,18 @@
     <div class="flex gap-2">
       <div class="flex-1">
         <span class="font-mono text-sm text-muted-foreground">CC:</span>
-        <Input v-model="ccModel" class="my-2" type="number" />
+        <Input v-model="ccInput" class="my-2" type="number" />
       </div>
       <div class="flex-1">
         <span class="font-mono text-sm text-muted-foreground">Channel:</span>
-        <Input v-model="channelModel" class="my-2" type="number" />
+        <Input v-model="channelInput" class="my-2" type="number" />
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { Input } from '@renderer/components/ui/input'
-import { computed } from 'vue'
+import { ref, watch, nextTick } from 'vue'
 const props = defineProps({
   value: {
     type: Object,
@@ -22,14 +22,21 @@ const props = defineProps({
   }
 })
 const emit = defineEmits(['update'])
-//TODO: These inputs are limited to 0-127 and 1-16, but once the value is at min/max the change events don't propagate and the field can contain invalid values
+
-const ccModel = computed({
+const ccInput = ref(props.value.cc)
-  get: () => props.value.cc || 0,
+const channelInput = ref(props.value.channel)
-  set: (cc) => emit('update', { cc: Math.max(0, Math.min(Number(cc), 127)) })
+
+watch(ccInput, (cc) => {
+  nextTick(() => {
+    ccInput.value = Math.max(0, Math.min(Number(cc), 127))
+  })
+  emit('update', { cc: ccInput.value })
 })
 
-const channelModel = computed({
+watch(channelInput, (channel) => {
-  get: () => props.value.channel || 1,
+  nextTick(() => {
-  set: (channel) => emit('update', { channel: Math.max(1, Math.min(Number(channel), 16)) })
+    channelInput.value = Math.max(1, Math.min(Number(channel), 16))
+  })
+  emit('update', { channel: channelInput.value })
 })
 </script>