@revenexx/studio-integrations 2.8.0 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @revenexx/studio-integrations
 
+## 2.8.1
+
+### Patch Changes
+
+- 46507f8: Escape in an open option list closes the list and stops there. In a node's dialog, the searchable list of a setting whose options come from the platform let Escape through to the dialog, which took it as Cancel and threw away every setting entered in it (PO-655). Escape with no list open still cancels the dialog.
+
 ## 2.8.0
 
 ### Minor Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/components/Integrations/NodeConfigDynamicField.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import { isVersionExecutable } from "../../data/integrationNodeCatalog";
 import { ChevronDown } from "lucide-vue-next";
 import { Input } from "@revenexx/studio";
@@ -33,14 +33,44 @@ const options = computed(() => q.data.value?.options ?? []);
 const isMulti = computed(() => props.field.type === "multiselect");
 const disabledControlClass = "flex h-8 items-center rounded-md border border-black/[0.08] bg-white px-2 text-sm text-muted-foreground opacity-50";
 const currentValue = computed(() => String(props.modelValue ?? ""));
+const seenLabels = ref(/* @__PURE__ */ new Map());
+watch(options, (list) => {
+  for (const o of list) seenLabels.value.set(String(o.value), resolveLocalized(o.label) || String(o.value));
+}, { immediate: true });
 const currentKnown = computed(
-  () => options.value.some((o) => String(o.value) === currentValue.value)
+  () => options.value.some((o) => String(o.value) === currentValue.value) || seenLabels.value.has(currentValue.value)
 );
-const currentLabel = computed(() => {
-  const hit = options.value.find((o) => String(o.value) === currentValue.value);
-  return hit ? resolveLocalized(hit.label) || String(hit.value) : currentValue.value;
-});
-const listOpen = computed(() => focused.value && !q.gated.value);
+const currentLabel = computed(() => seenLabels.value.get(currentValue.value) ?? currentValue.value);
+const listDismissed = ref(false);
+const listOpen = computed(() => focused.value && !q.gated.value && !listDismissed.value);
+const escapeHeld = ref(false);
+function onComboEscape(event) {
+  if (event.isComposing) return;
+  const claim = listOpen.value || escapeHeld.value && event.repeat;
+  if (!claim) return;
+  event.preventDefault();
+  event.stopPropagation();
+  if (!listOpen.value) return;
+  escapeHeld.value = true;
+  listDismissed.value = true;
+  const input = event.target;
+  void nextTick(() => input.select());
+}
+function onComboEscapeUp() {
+  escapeHeld.value = false;
+}
+function onComboArrowDown(event) {
+  if (!listDismissed.value) return;
+  event.preventDefault();
+  listDismissed.value = false;
+}
+function onComboSearch(v) {
+  search.value = String(v);
+  listDismissed.value = false;
+}
+function onComboClick() {
+  listDismissed.value = false;
+}
 const visibleOptions = computed(() => {
   const term = search.value.trim().toLowerCase();
   if (!focused.value || !term) return options.value;
@@ -51,6 +81,7 @@ const visibleOptions = computed(() => {
 });
 function onComboFocus() {
   search.value = "";
+  listDismissed.value = false;
   focused.value = true;
 }
 function onComboBlur() {
@@ -155,14 +186,16 @@ function toggleMulti(optValue) {
     <template v-else>
       <div class="relative">
         <Input
-          :model-value="focused ? search : currentLabel"
+          :model-value="listOpen ? search : currentLabel"
           :aria-label="resolveLocalized(field.label)"
           :placeholder="resolveLocalized(field.placeholder) || t('integration.nodeConfig.select.placeholder')"
           class="h-8 bg-white pr-7 text-sm"
-          @update:model-value="(v) => {
-  search = String(v);
-}"
+          @update:model-value="onComboSearch"
           @focus="onComboFocus"
+          @click="onComboClick"
+          @keydown.esc="onComboEscape"
+          @keyup.esc="onComboEscapeUp"
+          @keydown.down="onComboArrowDown"
           @blur="onComboBlur"
         />
         <ChevronDown :size="14" class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-integrations",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "type": "module",
   "description": "Integration Studio (core: workflows, node editor, runs, schedules, credentials, secrets, audit) as a standalone, publishable Nuxt module.",
   "repository": {
@@ -53,7 +53,7 @@
     "vue-sonner": "^2.0.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.31.0",
+    "@changesets/cli": "^3.0.3",
     "@nuxt/eslint-config": "^1.17.0",
     "@nuxt/kit": "^4.0.0",
     "@nuxt/module-builder": "^1.0.2",