Input Events Fire on Focus/Blur in Chrome Android

Overview

In Chrome on Android, input events may fire when a contenteditable element gains or loses focus, even without any actual content changes. This behavior can lead to unintended side effects in applications that rely on input events to detect content modifications.

Impact

• False Positive Events: Input events fire without actual content changes
• Unintended Side Effects: Applications may trigger save operations, validation, or other actions unnecessarily
• Performance Issues: Unnecessary processing triggered by false input events
• User Experience: Applications may behave unexpectedly

Technical Details

The issue occurs when:

1. A contenteditable element gains focus (user taps on it)
2. An input event fires even though no content was changed
3. Similarly, when the element loses focus, an input event may fire
4. Applications listening to input events may trigger unnecessary actions

Browser Comparison

• Chrome Android: This issue occurs
• Chrome Desktop: Not affected
• Firefox Android: Not affected
• Safari iOS: Not affected

Workarounds

Filter False Input Events

const editor = document.querySelector('[contenteditable]');
let lastContent = editor.innerHTML;
let isFocusing = false;
let isBlurring = false;

editor.addEventListener('focus', () => {
  isFocusing = true;
  lastContent = editor.innerHTML;
  
  // Reset flag after a short delay
  setTimeout(() => {
    isFocusing = false;
  }, 100);
});

editor.addEventListener('blur', () => {
  isBlurring = true;
  
  // Reset flag after a short delay
  setTimeout(() => {
    isBlurring = false;
  }, 100);
});

editor.addEventListener('input', (e) => {
  // Ignore input events during focus/blur
  if (isFocusing || isBlurring) {
    return;
  }
  
  // Check if content actually changed
  const currentContent = editor.innerHTML;
  if (currentContent === lastContent) {
    // Content didn't change, ignore this event
    return;
  }
  
  // Content actually changed, process the event
  lastContent = currentContent;
  handleContentChange(currentContent);
});

Use MutationObserver Instead

const editor = document.querySelector('[contenteditable]');
let isUserInput = false;

// Track user input
editor.addEventListener('beforeinput', () => {
  isUserInput = true;
});

editor.addEventListener('input', () => {
  isUserInput = false;
});

// Use MutationObserver to detect actual DOM changes
const observer = new MutationObserver((mutations) => {
  // Only process if it was user input
  if (isUserInput) {
    handleContentChange(editor.innerHTML);
  }
});

observer.observe(editor, {
  childList: true,
  subtree: true,
  characterData: true
});

Debounce Input Events

const editor = document.querySelector('[contenteditable]');
let inputTimeout;

editor.addEventListener('input', (e) => {
  // Clear previous timeout
  clearTimeout(inputTimeout);
  
  // Debounce input events
  inputTimeout = setTimeout(() => {
    const currentContent = editor.innerHTML;
    handleContentChange(currentContent);
  }, 150);
});

Related Cases

• Case IDs will be added as cases are created for specific environment combinations

References

• Chromium Issue 376223: Input events fired on contenteditable focus/blur - Input events trigger on focus/blur in Android Chrome
• Chakra UI Issue 1986: Scroll on focus for modals/inputs on Android - Related scroll behavior
• Ionic Issue 18532: Input focus scrolling not working when KeyboardResize is disabled
• WHATWG HTML Issue 8375: Need a way to prevent mobile browser scrolling when focusing an input
• Stack Overflow: Text inputs strange behavior on Chrome for Android