From 1b391d25c6d094913ccc69b7522e53405576622f Mon Sep 17 00:00:00 2001
From: Furkan Kambay <furkankambay@protonmail.com>
Date: Fri, 16 Jan 2026 22:48:47 +0300
Subject: [PATCH 1/5] feat: selectable settings field labels (#2275)

---
 src/components/count-field.vue           | 18 +++++++++++++++++-
 src/components/select-field.vue          |  9 +++++++++
 src/components/text-field.vue            | 14 +++++++++++++-
 src/components/toggle-field.vue          | 15 ++++++++++++++-
 src/styles/inputs.styl                   | 10 ++++++----
 src/styles/page.setup/styles-editor.styl |  1 -
 6 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/src/components/count-field.vue b/src/components/count-field.vue
index c243841b6..3f99d41f0 100644
--- a/src/components/count-field.vue
+++ b/src/components/count-field.vue
@@ -1,5 +1,9 @@
 <template lang="pug">
-.CountField(:data-active="props.value !== off" :data-inactive="props.inactive" @click="toggle")
+.CountField(
+  :data-active="props.value !== off"
+  :data-inactive="props.inactive"
+  @mousedown="onMouseDown"
+  @mouseup="onMouseUp")
   .body
     .label {{translate(props.label)}}
     .input-group(@click.stop)
@@ -29,6 +33,18 @@ interface CountFieldProps {
 const emit = defineEmits(['update:value', 'change'])
 const props = withDefaults(defineProps<CountFieldProps>(), { min: 0 })
 
+let rangeIsSelected = false
+
+function onMouseDown(e: DOMEvent<MouseEvent>) {
+  rangeIsSelected = getSelection()?.type === 'Range'
+  if (e.detail > 1) e.preventDefault()
+}
+
+function onMouseUp(e: DOMEvent<MouseEvent>) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
+  toggle()
+}
+
 function onInput(val: string): void {
   emit('update:value', val)
 }
diff --git a/src/components/select-field.vue b/src/components/select-field.vue
index 3ccda6e25..2d9b99749 100644
--- a/src/components/select-field.vue
+++ b/src/components/select-field.vue
@@ -4,6 +4,7 @@
   :data-inactive="props.inactive"
   :data-drop-down="dropDownOpen"
   @mousedown="onMouseDown"
+  @mouseup="onMouseUp"
   @contextmenu.stop.prevent=""
   @blur="onBlur"
   @keydown="onKeyDown")
@@ -59,7 +60,15 @@ const preSelected = ref<string | number>(-1)
 const inputComponent = ref<SelectInputComponent | null>(null)
 const rootEl = ref<HTMLElement | null>(null)
 
+let rangeIsSelected = false
+
 function onMouseDown(e: DOMEvent<MouseEvent>) {
+  rangeIsSelected = getSelection()?.type === 'Range'
+  if (e.detail > 1) e.preventDefault()
+}
+
+function onMouseUp(e: DOMEvent<MouseEvent>) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
   if (props.inactive || !props.opts || Array.isArray(props.value)) return
   if (e.button === 0) switchOption(1)
   if (e.button === 2) switchOption(-1)
diff --git a/src/components/text-field.vue b/src/components/text-field.vue
index 0e9862b76..2121a5cf5 100644
--- a/src/components/text-field.vue
+++ b/src/components/text-field.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.TextField(:data-inactive="props.inactive" @click="focus")
+.TextField(:data-inactive="props.inactive" @mousedown="onMouseDown" @mouseup="onMouseUp")
   .body
     .label {{translate(props.label)}}
     TextInput(
@@ -44,6 +44,18 @@ const props = withDefaults(defineProps<TextFieldProps>(), { padding: 0, tabindex
 
 const inputEl = ref<TextInputComponent | null>(null)
 
+let rangeIsSelected = false
+
+function onMouseDown(e: DOMEvent<MouseEvent>) {
+  rangeIsSelected = getSelection()?.type === 'Range'
+  if (e.detail > 1) e.preventDefault()
+}
+
+function onMouseUp(e: DOMEvent<MouseEvent>) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
+  focus()
+}
+
 function focus(): void {
   inputEl.value?.focus()
 }
diff --git a/src/components/toggle-field.vue b/src/components/toggle-field.vue
index c86b9938d..ad613f9e0 100644
--- a/src/components/toggle-field.vue
+++ b/src/components/toggle-field.vue
@@ -2,7 +2,8 @@
 .ToggleField(
   :data-inactive="props.inactive"
   :data-loading="loading"
-  @click="toggle"
+  @mousedown="onMouseDown"
+  @mouseup="onMouseUp"
   @keydown="onKeyDown")
   .focus-fx
   .body
@@ -39,6 +40,18 @@ const emit = defineEmits(['toggle', 'update:value'])
 const props = defineProps<ToggleFieldProps>()
 const inputComponent = ref<ToggleInputComponent | null>(null)
 
+let rangeIsSelected = false
+
+function onMouseDown(e: DOMEvent<MouseEvent>) {
+  rangeIsSelected = getSelection()?.type === 'Range'
+  if (e.detail > 1) e.preventDefault()
+}
+
+function onMouseUp(e: DOMEvent<MouseEvent>) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
+  toggle()
+}
+
 function toggle(): void {
   if (props.inactive) return
   if (props.loading) return
diff --git a/src/styles/inputs.styl b/src/styles/inputs.styl
index 74477e7fa..6bfed665c 100644
--- a/src/styles/inputs.styl
+++ b/src/styles/inputs.styl
@@ -28,7 +28,6 @@
   padding: 0 16px
   flex-shrink: 0
   cursor: default
-  -moz-user-select: none
   outline: none
   border-radius: 4px
   &:not(:first-of-type)
@@ -197,12 +196,16 @@
   padding: 0 0 12px 0px
   white-space: pre-wrap
   color: var(--toolbar-fg)
-  user-select: none
   opacity: .7
 
 // ---
 // -- Input
 // -
+.ToggleInput
+.SelectInput
+.TextInput
+  -moz-user-select: none
+
 .ToggleInput
 .SelectInput
   position: relative
@@ -415,6 +418,7 @@
   position: relative
   padding: 2px 3px
   overflow-y: auto
+  user-select: none
   scrollbar-color: var(--frame-scrollbar-color) #0000
 #root[data-native-scrollbars-thin="true"] .select-input-drop-down-content
   scrollbar-width: thin
@@ -650,7 +654,6 @@
     align-items: center
     color: var(--toolbar-fg)
     transition: color var(--d-fast)
-    -moz-user-select: none
   .input-group
     position: relative
     display: flex
@@ -706,7 +709,6 @@
 .StyleField
   position: relative
   padding: 8px 16px 2px
-  -moz-user-select: none
   &:not(:first-of-type)
     margin: 3px 0 0 0
 
diff --git a/src/styles/page.setup/styles-editor.styl b/src/styles/page.setup/styles-editor.styl
index e86b5bb1f..4f88fdb2c 100644
--- a/src/styles/page.setup/styles-editor.styl
+++ b/src/styles/page.setup/styles-editor.styl
@@ -98,7 +98,6 @@
   top: 0
   display: flex
   margin: 26px 0 12px
-  user-select: none
   z-index: 1000
   background-color: var(--frame-bg)
 #root[data-toolbar-color-scheme="light"] .StylesEditor .section-header

From e2e16d1fd2748b266b959690f33dfd5d6d5cbc64 Mon Sep 17 00:00:00 2001
From: Furkan Kambay <furkankambay@protonmail.com>
Date: Fri, 16 Jan 2026 23:40:18 +0300
Subject: [PATCH 2/5] fix: prevent context menu on setting fields unless text
 is selected

---
 src/components/count-field.vue  |  8 +++++++-
 src/components/num-field.vue    | 18 +++++++++++++++++-
 src/components/select-field.vue |  7 ++++++-
 src/components/text-field.vue   | 11 ++++++++++-
 src/components/toggle-field.vue |  6 ++++++
 5 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/components/count-field.vue b/src/components/count-field.vue
index 3f99d41f0..5d7dfd40b 100644
--- a/src/components/count-field.vue
+++ b/src/components/count-field.vue
@@ -3,7 +3,8 @@
   :data-active="props.value !== off"
   :data-inactive="props.inactive"
   @mousedown="onMouseDown"
-  @mouseup="onMouseUp")
+  @mouseup="onMouseUp"
+  @contextmenu.stop="onContextMenu")
   .body
     .label {{translate(props.label)}}
     .input-group(@click.stop)
@@ -45,6 +46,11 @@ function onMouseUp(e: DOMEvent<MouseEvent>) {
   toggle()
 }
 
+function onContextMenu(payload: PointerEvent) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
+  payload.preventDefault()
+}
+
 function onInput(val: string): void {
   emit('update:value', val)
 }
diff --git a/src/components/num-field.vue b/src/components/num-field.vue
index 2b20c8320..4ae122eaf 100644
--- a/src/components/num-field.vue
+++ b/src/components/num-field.vue
@@ -1,5 +1,9 @@
 <template lang="pug">
-.NumField(:data-active="!!props.value" :data-inactive="props.inactive")
+.NumField(
+  :data-active="!!props.value"
+  :data-inactive="props.inactive"
+  @contextmenu.stop="onContextMenu"
+  @mousedown="onMouseDown")
   .body
     .label {{translate(props.label)}}
     .input-group
@@ -46,6 +50,18 @@ const validUnit = computed((): string => {
   return !props.value ? 'none' : (props.unit ?? 'none')
 })
 
+let rangeIsSelected = false
+
+function onMouseDown(e: DOMEvent<MouseEvent>) {
+  rangeIsSelected = getSelection()?.type === 'Range'
+  if (e.detail > 1) e.preventDefault()
+}
+
+function onContextMenu(payload: PointerEvent) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
+  payload.preventDefault()
+}
+
 function valueFilter(e: Event): number | void {
   const target = e.target as HTMLInputElement
   let raw = target.value
diff --git a/src/components/select-field.vue b/src/components/select-field.vue
index 2d9b99749..7dcf98e0f 100644
--- a/src/components/select-field.vue
+++ b/src/components/select-field.vue
@@ -5,7 +5,7 @@
   :data-drop-down="dropDownOpen"
   @mousedown="onMouseDown"
   @mouseup="onMouseUp"
-  @contextmenu.stop.prevent=""
+  @contextmenu.stop="onContextMenu"
   @blur="onBlur"
   @keydown="onKeyDown")
   .focus-fx
@@ -74,6 +74,11 @@ function onMouseUp(e: DOMEvent<MouseEvent>) {
   if (e.button === 2) switchOption(-1)
 }
 
+function onContextMenu(payload: PointerEvent) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
+  payload.preventDefault()
+}
+
 function switchOption(dir: 1 | -1): void {
   if (props.inactive || !props.opts || Array.isArray(props.value)) return
   if (props.folded && !dropDownOpen.value) {
diff --git a/src/components/text-field.vue b/src/components/text-field.vue
index 2121a5cf5..0475e29a3 100644
--- a/src/components/text-field.vue
+++ b/src/components/text-field.vue
@@ -1,5 +1,9 @@
 <template lang="pug">
-.TextField(:data-inactive="props.inactive" @mousedown="onMouseDown" @mouseup="onMouseUp")
+.TextField(
+  :data-inactive="props.inactive"
+  @mousedown="onMouseDown"
+  @mouseup="onMouseUp"
+  @contextmenu.stop="onContextMenu")
   .body
     .label {{translate(props.label)}}
     TextInput(
@@ -56,6 +60,11 @@ function onMouseUp(e: DOMEvent<MouseEvent>) {
   focus()
 }
 
+function onContextMenu(payload: PointerEvent) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
+  payload.preventDefault()
+}
+
 function focus(): void {
   inputEl.value?.focus()
 }
diff --git a/src/components/toggle-field.vue b/src/components/toggle-field.vue
index ad613f9e0..3be8dfefb 100644
--- a/src/components/toggle-field.vue
+++ b/src/components/toggle-field.vue
@@ -4,6 +4,7 @@
   :data-loading="loading"
   @mousedown="onMouseDown"
   @mouseup="onMouseUp"
+  @contextmenu.stop="onContextMenu"
   @keydown="onKeyDown")
   .focus-fx
   .body
@@ -52,6 +53,11 @@ function onMouseUp(e: DOMEvent<MouseEvent>) {
   toggle()
 }
 
+function onContextMenu(payload: PointerEvent) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
+  payload.preventDefault()
+}
+
 function toggle(): void {
   if (props.inactive) return
   if (props.loading) return

From 5673eb14bcf62c4b610b13c28a705676c231dea6 Mon Sep 17 00:00:00 2001
From: Furkan Kambay <furkankambay@protonmail.com>
Date: Sat, 17 Jan 2026 10:45:28 +0300
Subject: [PATCH 3/5] fix: click-through on `SelectInput` dropdown overlay

---
 src/components/select-field.vue |  4 ++--
 src/components/select-input.vue | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/select-field.vue b/src/components/select-field.vue
index 7dcf98e0f..a50364445 100644
--- a/src/components/select-field.vue
+++ b/src/components/select-field.vue
@@ -6,7 +6,6 @@
   @mousedown="onMouseDown"
   @mouseup="onMouseUp"
   @contextmenu.stop="onContextMenu"
-  @blur="onBlur"
   @keydown="onKeyDown")
   .focus-fx
   .body
@@ -21,6 +20,7 @@
       :icon="props.icon"
       :folded="folded"
       :preSelected="preSelected"
+      @dropdown-blur="onDropdownBlur"
       @update:value="select")
   .note(v-if="props.note") {{props.note}}
 </template>
@@ -155,7 +155,7 @@ function select(option: string): void {
   if (rootEl.value) rootEl.value.tabIndex = -1
 }
 
-function onBlur(): void {
+function onDropdownBlur(): void {
   dropDownOpen.value = false
   if (inputComponent.value) inputComponent.value.close()
   if (rootEl.value) rootEl.value.tabIndex = -1
diff --git a/src/components/select-input.vue b/src/components/select-input.vue
index 8fb5d38a9..c40bf487d 100644
--- a/src/components/select-input.vue
+++ b/src/components/select-input.vue
@@ -15,7 +15,7 @@
     .opt.-exp(v-if="folded")
       svg: use(href="#icon_expand")
     teleport(v-if="folded && !disabledDropDownTeleport" to="#root")
-      .select-input-drop-down-layer(v-if="isOpen" @wheel="onWheel")
+      .select-input-drop-down-layer(v-if="isOpen" @wheel="onWheel" @mouseup="onMouseUp" @contextmenu.stop.prevent)
         .select-input-drop-down(:style="dropDownStyle")
           .select-input-drop-down-content(ref="dropDownEl")
             .opt(
@@ -25,7 +25,7 @@
               :data-none="((opt as InputObjOpt).value ?? opt) === props.noneOpt"
               :data-color="getOptColor(opt) ?? false"
               :data-active="((opt as InputObjOpt).value ?? opt) === preSelected"
-              @mousedown.stop="select(opt)")
+              @mouseup.stop="select(opt)")
               svg(v-if="((opt as InputObjOpt).icon || props.icon)?.startsWith('#')")
                 use(:href="((opt as InputObjOpt).icon || props.icon)")
               img(v-else-if="(opt as InputObjOpt).icon || props.icon" :src="(opt as InputObjOpt).icon || props.icon")
@@ -76,7 +76,7 @@ const focusEl = ref<HTMLElement | null>(null)
 const dropDownEl = ref<HTMLElement | null>(null)
 const disabledDropDownTeleport = ref(true)
 const isOpen = ref(false)
-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:value', 'dropdown-blur'])
 const props = withDefaults(defineProps<SelectInputProps>(), { noneOpt: 'none' })
 const dropDownStyle = reactive({
   '--left': '0px',
@@ -144,6 +144,10 @@ function getTooltip(option: InputOption): string {
   return ''
 }
 
+function onMouseUp(e: DOMEvent<MouseEvent>) {
+  emit('dropdown-blur')
+}
+
 function onWheel(e: WheelEvent): void {
   if (!dropDownEl.value) return
 

From df1537daec17c994e3a44e567dbfa1d4f5cd0e12 Mon Sep 17 00:00:00 2001
From: Furkan Kambay <furkankambay@protonmail.com>
Date: Sat, 17 Jan 2026 12:21:44 +0300
Subject: [PATCH 4/5] feat: left-click to focus TextInput, right click to
 modify setting

---
 src/components/count-field.vue | 11 ++++++++++-
 src/components/num-field.vue   | 36 +++++++++++++++++++++++++++++++---
 src/components/style-field.vue | 32 +++++++++++++++++++++++++++++-
 3 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/src/components/count-field.vue b/src/components/count-field.vue
index 5d7dfd40b..75791bf8c 100644
--- a/src/components/count-field.vue
+++ b/src/components/count-field.vue
@@ -9,6 +9,7 @@
     .label {{translate(props.label)}}
     .input-group(@click.stop)
       TextInput.text-input(
+        ref="textInputEl"
         :value="props.value"
         :line="true"
         :filter="valueFilter"
@@ -18,7 +19,9 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import { translate } from 'src/dict'
+import type { TextInputComponent } from 'src/types'
 import TextInput from './text-input.vue'
 import ToggleInput from './toggle-input.vue'
 
@@ -33,6 +36,7 @@ interface CountFieldProps {
 
 const emit = defineEmits(['update:value', 'change'])
 const props = withDefaults(defineProps<CountFieldProps>(), { min: 0 })
+const textInputEl = ref<TextInputComponent | null>(null)
 
 let rangeIsSelected = false
 
@@ -43,7 +47,8 @@ function onMouseDown(e: DOMEvent<MouseEvent>) {
 
 function onMouseUp(e: DOMEvent<MouseEvent>) {
   if (rangeIsSelected || getSelection()?.type === 'Range') return
-  toggle()
+  if (e.button === 0) focusTextInput()
+  if (e.button === 2) toggle()
 }
 
 function onContextMenu(payload: PointerEvent) {
@@ -66,6 +71,10 @@ function valueFilter(e: Event): number {
   else return val
 }
 
+function focusTextInput(): void {
+  textInputEl.value?.focus()
+}
+
 function toggle(): void {
   if (props.inactive) return
   else if (props.value === props.off && props.off) emit('update:value', props.min ?? props.off + 1)
diff --git a/src/components/num-field.vue b/src/components/num-field.vue
index 4ae122eaf..afb9b4778 100644
--- a/src/components/num-field.vue
+++ b/src/components/num-field.vue
@@ -2,12 +2,14 @@
 .NumField(
   :data-active="!!props.value"
   :data-inactive="props.inactive"
-  @contextmenu.stop="onContextMenu"
-  @mousedown="onMouseDown")
+  @mousedown="onMouseDown"
+  @mouseup="onMouseUp"
+  @contextmenu.stop="onContextMenu")
   .body
     .label {{translate(props.label)}}
     .input-group
       TextInput.text-input(
+        ref="textInputEl"
         :value="props.value"
         :line="true"
         :filter="valueFilter"
@@ -24,9 +26,10 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import { computed } from 'vue'
 import { translate } from 'src/dict'
-import type { InputOption } from 'src/types'
+import type { InputOption, InputObjOpt, TextInputComponent } from 'src/types'
 import TextInput from './text-input.vue'
 import SelectInput from './select-input.vue'
 
@@ -45,6 +48,7 @@ interface NumFieldProps {
 
 const emit = defineEmits(['update:value', 'update:unit'])
 const props = defineProps<NumFieldProps>()
+const textInputEl = ref<TextInputComponent | null>(null)
 
 const validUnit = computed((): string => {
   return !props.value ? 'none' : (props.unit ?? 'none')
@@ -57,11 +61,33 @@ function onMouseDown(e: DOMEvent<MouseEvent>) {
   if (e.detail > 1) e.preventDefault()
 }
 
+function onMouseUp(e: DOMEvent<MouseEvent>) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
+  if (e.button === 0) focusTextInput()
+  if (e.button === 2) switchUnitOption(-1)
+}
+
 function onContextMenu(payload: PointerEvent) {
   if (rangeIsSelected || getSelection()?.type === 'Range') return
   payload.preventDefault()
 }
 
+function switchUnitOption(dir: 1 | -1): void {
+  if (props.inactive || !props.unitOpts || Array.isArray(props.unit)) return
+  let i = props.unit !== undefined ? props.unitOpts.indexOf(props.unit) : -1
+  if (i === -1) i = props.unitOpts.findIndex(o => (o as InputObjOpt).value === props.unit)
+  if (i === -1) return
+  i += dir
+  if (i >= props.unitOpts.length) i = 0
+  if (i < 0) i = props.unitOpts.length - 1
+  let selected = props.unitOpts[i]
+  if (selected && (selected as InputObjOpt).value) {
+    emit('update:unit', (selected as InputObjOpt).value)
+  } else {
+    emit('update:unit', selected)
+  }
+}
+
 function valueFilter(e: Event): number | void {
   const target = e.target as HTMLInputElement
   let raw = target.value
@@ -75,6 +101,10 @@ function valueFilter(e: Event): number | void {
   return val
 }
 
+function focusTextInput(): void {
+  textInputEl.value?.focus()
+}
+
 function select(unit: string): void {
   if (props.inactive) return
 
diff --git a/src/components/style-field.vue b/src/components/style-field.vue
index ee92efe28..9849a5221 100644
--- a/src/components/style-field.vue
+++ b/src/components/style-field.vue
@@ -1,5 +1,10 @@
 <template lang="pug">
-.StyleField(:class="{ '-no-separator': noSeparator }" :data-active="!!props.value")
+.StyleField(
+  :class="{ '-no-separator': noSeparator }"
+  :data-active="!!props.value"
+  @mousedown="onMouseDown"
+  @mouseup="onMouseUp"
+  @contextmenu.stop="onContextMenu")
   .label
     .desc {{translate(props.label) || props.name}}
     .var(v-if="props.name") {{props.name}}
@@ -11,6 +16,7 @@
         :value="colorValue"
         @input="onColorInput")
     TextInput.text-input(
+      ref="textInputEl"
       :value="props.value"
       :line="true"
       :or="props.or"
@@ -24,6 +30,7 @@
 import { ref, computed } from 'vue'
 import * as Utils from 'src/utils'
 import { translate } from 'src/dict'
+import type { TextInputComponent } from 'src/types'
 import TextInput from './text-input.vue'
 import ToggleInput from './toggle-input.vue'
 
@@ -39,6 +46,7 @@ interface StyleFieldProps {
 
 const emit = defineEmits(['update:value', 'change', 'toggle'])
 const props = defineProps<StyleFieldProps>()
+const textInputEl = ref<TextInputComponent | null>(null)
 
 const opaq = ref('ff')
 
@@ -58,6 +66,24 @@ const colorOpacity = computed((): number => {
   return num / 255
 })
 
+let rangeIsSelected = false
+
+function onMouseDown(e: DOMEvent<MouseEvent>) {
+  rangeIsSelected = getSelection()?.type === 'Range'
+  if (e.detail > 1) e.preventDefault()
+}
+
+function onMouseUp(e: DOMEvent<MouseEvent>) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
+  if (e.button === 0) focusTextInput()
+  if (e.button === 2) toggle()
+}
+
+function onContextMenu(payload: PointerEvent) {
+  if (rangeIsSelected || getSelection()?.type === 'Range') return
+  payload.preventDefault()
+}
+
 function onColorInput(e: Event): void {
   const len = (e.target as HTMLInputElement).value.length
   if (len < 7) (e.target as HTMLInputElement).value += '0'.repeat(6 - len)
@@ -79,6 +105,10 @@ function onChange(): void {
   emit('change', props.value)
 }
 
+function focusTextInput(): void {
+  textInputEl.value?.focus()
+}
+
 function toggle(): void {
   emit('toggle')
 }

From e280b68ab8b5a7b376df130bb680de0de98a61bd Mon Sep 17 00:00:00 2001
From: Furkan Kambay <furkankambay@protonmail.com>
Date: Sat, 17 Jan 2026 15:13:26 +0300
Subject: [PATCH 5/5] fix: text selection and and ctx menu in `TextInput`s

---
 src/components/text-input.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/text-input.vue b/src/components/text-input.vue
index ecd89a71e..8c5a00327 100644
--- a/src/components/text-input.vue
+++ b/src/components/text-input.vue
@@ -5,6 +5,9 @@
   :data-valid="props.valid"
   :data-wrong="state.wrongValueAnimation"
   :data-width="props.width"
+  @contextmenu.stop
+  @mousedown.stop
+  @mouseup.stop
   @animationend="onAnimationEnd")
   .focus-fx
   input(