Support Thread

Add a close button to the "Someone might have already asked..." popup when creating a new

📅 👤 ASP Playground
Add a close button to the "Someone might have already asked..." popup when creating a new — APG vNext Guide

This community thread discusses the feature or improvement: Add a close button to the "Someone might have already asked..." popup when creating a new.

Feature Details

When creating a new post a message pops up "Someone might have already asked your question..." which I like. However, it ends up covering a number of options...

How APG vNext Handles Feature Requests

Feature requests and suggestions are tracked through the community forum. The development team reviews popular requests and incorporates the most-requested improvements into upcoming releases.

  • Vote for features by upvoting the original post in the forum thread
  • Add details about your use case to help prioritize the request
  • Check the release blog for updates on upcoming features

See the full feature set on the Features page or browse all community discussions.

Adding a Close Button to the "Someone Might Have Already Asked" Popup in APG vNext

APG vNext includes a duplicate-question detection popup that appears when a member starts typing a new thread title. It suggests similar existing threads to prevent duplicate posts. While valuable, some communities find it disruptive — particularly technical forums where thread titles are naturally similar but the content differs. This guide explains how to add a dismiss button to the popup so users can close it immediately if it is not helpful.

How the Duplicate Detection Popup Works

The popup is triggered by a JavaScript event listener on the thread title input field. After the user types 3+ characters (debounced at 500ms), APG vNext sends an AJAX request to /community/search-suggest with the partial title. If matching threads are found, the popup renders above the new thread form. The popup currently has no dismiss button in APG vNext versions prior to 5.5.

Solution — Adding a Close Button via Custom JavaScript

The cleanest approach is to inject a close button into the popup DOM after it renders, using APG vNext's custom JavaScript hook. Add this to your skin's custom JavaScript file (custom.js):

// APG vNext — Add close button to duplicate-detection popup
document.addEventListener('DOMContentLoaded', () => {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node.classList &&
            node.classList.contains('apg-suggest-popup') &&
            !node.querySelector('.apg-suggest-close')) {
          const btn = document.createElement('button');
          btn.className   = 'apg-suggest-close';
          btn.textContent = '✕';
          btn.setAttribute('aria-label', 'Dismiss suggestions');
          btn.addEventListener('click', () => node.remove());
          node.appendChild(btn);
        }
      });
    });
  });
  observer.observe(document.body, { childList: true, subtree: true });
});

Styling the Close Button

/* Add to your APG vNext skin CSS */
.apg-suggest-popup {
  position: relative;
}
.apg-suggest-close {
  position:   absolute;
  top:        .5rem;
  right:      .5rem;
  background: transparent;
  border:     none;
  font-size:  1rem;
  color:      #64748b;
  cursor:     pointer;
  padding:    .25rem .5rem;
  line-height: 1;
}
.apg-suggest-close:hover { color: #0f1a2b; }

Disabling the Popup Entirely

If your community prefers to disable duplicate detection completely:

<!-- web.config -->
<add key="APG.NewThread.SuggestDuplicates" value="false" />

Configuring Duplicate Detection Behaviour

Beyond the close button, APG vNext offers several configuration points to control how the duplicate detection popup behaves, allowing you to tune it for your specific community's needs.

Adjusting the Detection Threshold

The popup fires after 3 characters by default. For technical forums with short acronym-heavy titles, this causes false positives constantly. Raise the threshold:

<!-- web.config: duplicate detection sensitivity -->
<add key="APG.NewThread.SuggestMinChars"     value="6" /> <!-- was 3 -->
<add key="APG.NewThread.SuggestDebounceMs"   value="800" /> <!-- was 500ms -->
<add key="APG.NewThread.SuggestMaxResults"   value="5" />
<add key="APG.NewThread.SuggestForumScoped" value="true" />
<!-- Only suggest from the same forum category, not globally -->

Forum-Scoped Suggestion

By default, the popup suggests matching threads from all forums the user can read. For communities with distinct sub-forums covering completely different topics, this creates irrelevant cross-category suggestions. Enable forum-scoped mode so members creating a new thread in the "Hardware" forum only see hardware-related duplicate suggestions.

Using MutationObserver Safely

The MutationObserver approach in the JavaScript solution above is robust, but there are edge cases to be aware of:

Performance on Long Thread Pages

A MutationObserver watching document.body with subtree: true fires on every DOM change on the page. On very long thread pages, this can accumulate significant overhead. Narrow the scope to the new thread form container:

// Narrower scope — only watch the new thread form area
const formContainer = document.querySelector('#new-thread-form, .apg-new-thread');
if (formContainer) {
  observer.observe(formContainer, { childList: true, subtree: true });
} else {
  // Fallback to body if form not present (e.g., on initial page load)
  observer.observe(document.body, { childList: true, subtree: true });
}

Disconnecting the Observer

Once the form is submitted or closed, disconnect the observer to free resources:

document.querySelector('#new-thread-submit').addEventListener('click', () => {
  observer.disconnect();
});

APG vNext 5.5 and Later: Built-in Close Button

APG vNext version 5.5 added a native close (×) button to the duplicate suggestion popup, making the custom JavaScript workaround described here unnecessary for newer installations. The native button is rendered as part of the popup template and is keyboard accessible out of the box. If you are on 5.5+, verify the button is present before implementing the custom solution — Admin Panel → About → Version should show 5.5 or higher.

<!-- If the native button is not showing on 5.5+, check:
     the skin's new-thread template hasn't overridden the popup -->
<!-- Also verify: APG.NewThread.SuggestDismissible = true -->
<add key="APG.NewThread.SuggestDismissible" value="true" />

Related Resources


Looking for more help? Browse the support forum or check the Knowledge Base.