click-outside-blur

A lightweight utility to automatically blur focused inputs when clicking outside on non-focusable elements. This solves the common issue where clicking on divs, spans, or other non-interactive elements doesn't blur focused inputs.

Installation

npm install click-outside-blur
# or
yarn add click-outside-blur

Usage

Basic Usage

import { setupClickOutsideBlur } from 'click-outside-blur';

// Setup the functionality
const cleanup = setupClickOutsideBlur();

// Later, when you want to disable it
cleanup();

With Options

import { setupClickOutsideBlur } from 'click-outside-blur';

const cleanup = setupClickOutsideBlur({
  inputSelector: 'input, textarea, select, [contenteditable="true"]',
  focusableSelector: 'input, textarea, select, button, a, [contenteditable="true"], [tabindex]',
  enabled: true
});

Using the Class

import { ClickOutsideBlur } from 'click-outside-blur';

const blurHandler = new ClickOutsideBlur({
  inputSelector: 'input, textarea',
  focusableSelector: 'input, textarea, button, a'
});

// Enable/disable as needed
blurHandler.disable();
blurHandler.enable();

// Check if enabled
console.log(blurHandler.isEnabled()); // true/false

// Update options
blurHandler.updateOptions({
  inputSelector: 'input, textarea, select'
});

Vue.js Integration

// In your main.js or App.vue
import { setupClickOutsideBlur } from 'click-outside-blur';

// Setup in onMounted
onMounted(() => {
  setupClickOutsideBlur();
});

React Integration

// In your App.js or main component
import { useEffect } from 'react';
import { setupClickOutsideBlur } from 'click-outside-blur';

function App() {
  useEffect(() => {
    const cleanup = setupClickOutsideBlur();
    return cleanup; // Cleanup on unmount
  }, []);

  return <div>Your app content</div>;
}

API

setupClickOutsideBlur(options?)

Simple function to setup the functionality.

Parameters:

• options (optional): Configuration options

Returns: Cleanup function

createClickOutsideBlur(options?)

Creates a ClickOutsideBlur instance.

Parameters:

• options (optional): Configuration options

Returns: ClickOutsideBlur instance

ClickOutsideBlur Class

Constructor

new ClickOutsideBlur(options)

Methods

• enable(): Enable the functionality
• disable(): Disable the functionality
• isEnabled(): Check if enabled
• updateOptions(options): Update configuration

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | inputSelector | string | 'input, textarea, select, [contenteditable="true"]' | CSS selector for elements that should be considered as inputs | | focusableSelector | string | 'input, textarea, select, button, a, [contenteditable="true"], [tabindex]' | CSS selector for elements that should be considered as focusable | | enabled | boolean | true | Whether to enable the functionality immediately |

How It Works

1. Listens for clicks on the entire document
2. Checks if there's currently a focused input element
3. Determines if the clicked element is focusable
4. If clicking on a non-focusable element, blurs the focused input

Browser Support

• Modern browsers (ES2018+)
• IE11+ (with polyfills)

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request