🔍 Logging & Debugging

Example 1: Basic Logging Control

JS import (no attribute): call enableLogging() · disableLogging() · setLogLevel("info") from @keenmate/web-multiselect

Enable and disable logging at runtime. Watch the console as you interact with the multiselect.

Example 2: Category-Specific Logging

JS import (no attribute): setCategoryLevel("DATA", "debug") per category · close_on_select={false} keeps the panel open while you watch logs

Enable logging for specific categories only. This example has async search enabled - type to see DATA logs. Try enabling different categories to see different types of logs.

Example 3: Hybrid Static + Dynamic Search

min_search_length={3} gates the search · JS callback (no attribute): el.beforeSearchCallback strips accents before the query

Show popular items initially, then switch to web service search. Demonstrates beforeSearchCallback for accent removal.

📝 Available Log Categories

• INIT - Component initialization, configuration parsing, RTL detection, destruction
• DATA - Async data loading, option parsing, adding new options, errors
• UI - Dropdown/popover/tooltip rendering, positioning, badges display
• INTERACTION - Clicks, selections, keyboard events, closeOnSelect behavior

💡 Usage in Your Code

Here's how to control logging programmatically:

// Import logging utilities
import { enableLogging, setLogLevel, setCategoryLevel, disableLogging }
    from '@keenmate/web-multiselect';

// Enable all logging at debug level
enableLogging();

// Set specific log level for all categories
setLogLevel('info');  // 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent'

// Enable/disable specific categories
disableLogging();  // First disable all
setCategoryLevel('UI', 'debug');  // Debug only UI operations
setCategoryLevel('DATA', 'info');  // Info level for data operations
setCategoryLevel('INTERACTION', 'silent');  // Disable interaction logs

// Disable all logging (default for production)
disableLogging();