Format on type?

[pratamatama]

Can we do a live formatting when the users type instead of formatting on blur?
I didn't see any section of docs mentioning this feature yet. Is it impossible to implement?

[dm4t2]

This is already implemented. Use this options:

{
  "hideCurrencySymbolOnFocus": false,
  "hideGroupingSeparatorOnFocus": false,
  "hideNegligibleDecimalDigitsOnFocus": false
}

[pratamatama]

Hi @dm4t2 ! Thanks for the answer..
I've set those keys but it still the same, I still need to click outside of the input box to get the formatted result. Am I missed something?

<script setup lang="ts">
import { useCurrencyInput, type CurrencyInputOptions } from 'vue-currency-input'

const props = defineProps<{
  label?: string
  name: string
  type?: string
  value?: string | number
  placeholder?: string
  required?: boolean
  min?: number
  max?: number
}>()

const name = toRef(props, 'name')
const {
  value: inputValue,
  errorMessage,
  setValue,
  handleChange,
  handleBlur,
} = useField(name, undefined, {
  initialValue: props.value,
})

defineExpose({ setValue })

const options: CurrencyInputOptions = {
  locale: 'id',
  currency: 'IDR',
  hideCurrencySymbolOnFocus: false,
  hideGroupingSeparatorOnFocus: false,
  hideNegligibleDecimalDigitsOnFocus: false,
  valueRange: {
    min: props.min ?? 1000000,
    max: props.max,
  },
}

const { inputRef, numberValue } = useCurrencyInput(options)
watch(numberValue, (v) => setValue(v ?? 0))
</script>

<template>
  <div>
    <label
      v-if="label"
      :for="name"
      class="block w-full font-medium text-sm mb-[6px]"
    >
      {{ label }}
    </label>
    <input
      ref="inputRef"
      :id="name"
      :name="name"
      :type="type"
      :placeholder="placeholder"
      :value="inputValue"
      :required="required ?? true"
      @blur="handleBlur"
      @input="handleChange"
      class="block w-full border rounded-lg px-[14px] py-[10px] shadow-sm outline-none focus:ring focus:ring-brand focus:ring-opacity-75 transition-all duration-200"
    />
    <p v-if="errorMessage" class="block w-full text-red-500 mt-1 text-sm">
      <small>{{ errorMessage }}</small>
    </p>
  </div>
</template>

[pratamatama]

Oh never mind, it seems like the :value="inputValue" part of my code was causing the issue.
It works when I removed it. Thank you for the help!