hermes-config/skills/self-hosting/shop-pro-quote/references/modal-patterns.md

ShopProQuote Modal Click-Outside Behavior

Default pattern (to REMOVE)

ShopProQuote modals use this pattern to close on outside click:

// Close on outside click
modal.addEventListener('click', (e) => {
    if (e.target === modal) {
        modal.classList.add('hidden');  // or closeModal() or modal.remove()
    }
});

Or for confirm dialogs in shared/modal-manager.js:

overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(false); } };

Finding all instances

grep -rn "e\.target\s*===.*modal\|e\.target\s*===.*overlay" /mnt/seagate8tb/Websites/ShopProQuote/

Locations (as of June 2026)

File	Context
quote-tab-manager.js:1379	Service edit modal — modal.classList.add('hidden')
quote-tab-manager.js:1680	Parts availability modal — closeModal()
shared/customer-lookup.js:253	Customer lookup modal — modal.remove()
settings.js:315	Site settings modal — closeModal()
shared/modal-manager.js:328	Confirm dialog overlay — overlay.remove(); resolve(false)

Fix

Remove the entire modal.addEventListener('click', ...) block (or overlay.onclick = ... line) and replace with a comment:

// Click-outside-to-close disabled per user preference: only close via save or close button

What NOT to touch

Dropdown menus (ui.js, dashboard.js, repair-orders.js, financial-dashboard.js, shared/customer-lookup.js search results) — these use the same pattern but closing on outside click is expected UX for dropdowns. Only disable for modal dialogs.