Fix arrow keys in text inputs (#10244)

Fixes #10239 # Important Notes This is a quick fix, but we may consider better focus handling - perhaps the graph editor should be focusable?
enso-org · Jun 11, 2024 · a2c4d94 · a2c4d94
1 parent 4da5e61
commit a2c4d94
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 3 deletions.
diff --git a/app/gui2/src/components/CodeEditor.vue b/app/gui2/src/components/CodeEditor.vue
@@ -331,6 +331,10 @@ const editorStyle = computed(() => {
     ref="rootElement"
     class="CodeEditor"
     :style="editorStyle"
+    @keydown.arrow-left.stop
+    @keydown.arrow-right.stop
+    @keydown.arrow-up.stop
+    @keydown.arrow-down.stop
     @keydown.enter.stop
     @keydown.backspace.stop
     @keydown.delete.stop

diff --git a/app/gui2/src/components/ComponentBrowser.vue b/app/gui2/src/components/ComponentBrowser.vue
@@ -481,6 +481,8 @@ const handler = componentBrowserBindings.handler({
     @keydown.enter.stop
     @keydown.backspace.stop
     @keydown.delete.stop
+    @keydown.arrow-left.stop
+    @keydown.arrow-right.stop
   >
     <div class="panels">
       <div class="panel components">

diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetFunctionName.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetFunctionName.vue
@@ -87,6 +87,8 @@ export const widgetDefinition = defineWidget(
       @pointerdown.stop
       @click.stop
       @keydown.enter.stop
+      @keydown.arrow-left.stop
+      @keydown.arrow-right.stop
     />
   </div>
 </template>

diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetText.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetText.vue
@@ -99,8 +99,6 @@ export const widgetDefinition = defineWidget(
       ref="input"
       v-model="editedContents"
       autoSelect
-      @pointerdown.stop
-      @click.stop
       @keydown.enter.stop="accepted"
       @focusin="editing.start()"
       @input="editing.edit(makeLiteralFromUserInput($event ?? ''))"

diff --git a/app/gui2/src/components/lexical/LexicalContent.vue b/app/gui2/src/components/lexical/LexicalContent.vue
@@ -1,5 +1,14 @@
 <template>
-  <div ref="lexicalElement" class="LexicalContent" spellcheck="false" contenteditable="true" />
+  <div
+    ref="lexicalElement"
+    class="LexicalContent"
+    spellcheck="false"
+    contenteditable="true"
+    @keydown.arrow-left.stop
+    @keydown.arrow-right.stop
+    @keydown.arrow-up.stop
+    @keydown.arrow-down.stop
+  />
 </template>
 
 <style scoped>

diff --git a/app/gui2/src/components/widgets/AutoSizedInput.vue b/app/gui2/src/components/widgets/AutoSizedInput.vue
@@ -61,8 +61,12 @@ defineExpose({
     v-model="innerModel"
     class="AutoSizedInput"
     :style="inputStyle"
+    @pointerdown.stop
+    @click.stop
     @keydown.backspace.stop
     @keydown.delete.stop
+    @keydown.arrow-left.stop
+    @keydown.arrow-right.stop
     @keydown.enter.stop="onEnterDown"
     @input="emit('input', innerModel)"
     @change="onChange"