Skip to content

Conversation

@nzinovyev19
Copy link

Problem

IMask correctly handles IME composition events by default, but this behavior can be problematic for certain mobile keyboards and user experiences. Many mobile keyboards (including Yandex, Xiaomi, Huawei default keyboards, and others) use composition events extensively, which can cause masking to work only after blur events rather than during real-time input.

This creates a poor user experience where users don't see immediate feedback while typing, especially on mobile devices where these keyboards are commonly used. While IMask's current behavior is technically correct, it's not always optimal for the end-user experience.

Related Issue: #1055

Solution

Added new ignoreCompositionState option that allows developers to control how IMask handles IME composition events. This gives developers the flexibility to choose between:

  • Default behavior: Respect composition events (current behavior)
  • Forced processing: Ignore composition events and process input immediately

This is particularly useful for mobile applications where users expect immediate visual feedback while typing with keyboards that heavily use composition events.

Usage

// React
const { ref } = useIMask({
  mask: '0000-0000-0000-0000',
  ignoreCompositionState: true  // Process input immediately, ignore composition state
});

// Vue
<IMaskInput 
  :mask="'0000-0000-0000-0000'"
  :ignoreCompositionState="true"
/>

// Vanilla JS
IMask(element, {
  mask: '0000-0000-0000-0000',
  ignoreCompositionState: true
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant