Package Exports

click-outside-blur
click-outside-blur/dist/index.esm.js
click-outside-blur/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (click-outside-blur) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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