@saasmakers/ui 2.1.5 → 2.1.6

package/app/components/fields/FieldInput.vue

@@ -48,7 +48,7 @@ const input = ref<HTMLInputElement>()
 const showPassword = ref(false)
 const { isDesktopBrowser } = useDevice()
 
-const { isTypingOnIos, onBlur: onIosUppercaseBlur, onFocus: onIosUppercaseFocus, usesIosUppercaseKeyboard } = useIosUppercase({
+const { isActiveOnIos, isTypingOnIos, onBlur: onIosUppercaseBlur, onCompositionEnd: onIosUppercaseCompositionEnd, onFocus: onIosUppercaseFocus, onInput: onIosUppercaseInput } = useIosUppercase({
   enabled: () => {
     const isProseField = props.type === 'text' || props.type === 'search'
 
@@ -92,6 +92,7 @@ function onFieldFocus(event: FocusEvent) {
 }
 
 function onFieldInput(event: Event) {
+  onIosUppercaseInput(event)
   syncModelValueFromTarget(event.target)
 }
 
@@ -204,7 +205,7 @@ defineExpose({
           :id="id"
           ref="input"
           :autocomplete="autocomplete ? 'on' : 'off'"
-          :autocapitalize="usesIosUppercaseKeyboard ? 'characters' : undefined"
+          :autocapitalize="isActiveOnIos ? 'characters' : undefined"
           v-bind="autofocus ? { 'data-autofocus': '' } : {}"
           class="h-full w-full appearance-none items-center rounded-lg font-medium tracking-tight outline-none placeholder-gray-600 dark:placeholder-gray-400"
           :class="{
@@ -244,6 +245,7 @@ defineExpose({
           :type="type === 'password' && showPassword ? 'text' : type"
           :value="modelValue"
           @blur="onFieldBlur"
+          @compositionend="onIosUppercaseCompositionEnd"
           @focus="onFieldFocus"
           @input="onFieldInput"
           @keydown="onFieldKeyDown"

package/app/components/fields/FieldTextarea.vue

@@ -32,7 +32,7 @@ const modelValue = defineModel<FieldTextarea['modelValue']>({ default: '' })
 const textarea = ref<HTMLTextAreaElement>()
 const { isDesktopBrowser } = useDevice()
 
-const { isTypingOnIos, onBlur: onIosUppercaseBlur, onFocus: onIosUppercaseFocus, usesIosUppercaseKeyboard } = useIosUppercase({
+const { isActiveOnIos, isTypingOnIos, onBlur: onIosUppercaseBlur, onCompositionEnd: onIosUppercaseCompositionEnd, onFocus: onIosUppercaseFocus, onInput: onIosUppercaseInput } = useIosUppercase({
   enabled: () => props.uppercase,
   modelValue,
 })
@@ -83,7 +83,7 @@ function syncModelValueFromTarget(target: EventTarget | null) {
       ref="textarea"
       v-model="modelValue"
       v-bind="{ 'data-enable-grammarly': 'false' }"
-      :autocapitalize="usesIosUppercaseKeyboard ? 'characters' : undefined"
+      :autocapitalize="isActiveOnIos ? 'characters' : undefined"
       class="w-full flex-1 appearance-none rounded-lg text-gray-900 font-medium tracking-tight outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400"
       :class="{
         'uppercase': uppercase && !isTypingOnIos,
@@ -110,7 +110,9 @@ function syncModelValueFromTarget(target: EventTarget | null) {
       spellcheck="false"
       @blur="onFieldBlur"
       @click="onFieldClick"
+      @compositionend="onIosUppercaseCompositionEnd"
       @focus="onIosUppercaseFocus"
+      @input="onIosUppercaseInput"
     />
 
     <FieldMessage

package/app/composables/useIosUppercase.ts

@@ -5,32 +5,71 @@ export default function useIosUppercase(options: {
   modelValue: Ref<string>
 }) {
   const { isIosDevice } = useDevice()
-  const focused = ref(false)
+  const isFocused = ref(false)
 
-  const usesIosUppercaseKeyboard = computed(() => {
+  const isActiveOnIos = computed(() => {
     return toValue(options.enabled) && isIosDevice.value
   })
 
   const isTypingOnIos = computed(() => {
-    return usesIosUppercaseKeyboard.value && focused.value
+    return isActiveOnIos.value && isFocused.value
   })
 
   function onFocus() {
-    if (usesIosUppercaseKeyboard.value) {
+    if (isActiveOnIos.value) {
       options.modelValue.value = options.modelValue.value.toUpperCase()
     }
 
-    focused.value = true
+    isFocused.value = true
   }
 
   function onBlur() {
-    focused.value = false
+    isFocused.value = false
+  }
+
+  function onInput(event: Event) {
+    // Rewriting the value mid-composition breaks IME and accent input.
+    if (event instanceof InputEvent && event.isComposing) {
+      return
+    }
+
+    forceUppercase(event.target)
+  }
+
+  function onCompositionEnd(event: CompositionEvent) {
+    forceUppercase(event.target)
+  }
+
+  function forceUppercase(target: EventTarget | null) {
+    if (!isActiveOnIos.value) {
+      return
+    }
+
+    if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) {
+      return
+    }
+
+    const uppercased = target.value.toUpperCase()
+
+    if (uppercased === target.value) {
+      return
+    }
+
+    const { selectionEnd, selectionStart } = target
+
+    target.value = uppercased
+
+    target.setSelectionRange(selectionStart ?? uppercased.length, selectionEnd ?? uppercased.length)
+
+    options.modelValue.value = uppercased
   }
 
   return {
+    isActiveOnIos,
     isTypingOnIos,
     onBlur,
+    onCompositionEnd,
     onFocus,
-    usesIosUppercaseKeyboard,
+    onInput,
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",