Skip to content

Fix duplicate search box in plugin edit mode #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Fix duplicate search box in plugin edit mode #5

wants to merge 6 commits into from
+129 −29

Conversation

@brandonjp
Copy link
Owner

@brandonjp brandonjp commented Nov 23, 2025

  1. Fixed duplicate search box appearing in edit mode

    • Added check to prevent creating multiple filter boxes
    • Filter box is now created only once even when table changes

  2. Hide WordPress native search and use ABPS search instead

    • Added CSS to hide WP native search (.search-box, .wp-filter .search-form)
    • ABPS search is superior with better filtering capabilities

  3. Fixed unable to exit edit mode issue

    • Excluded ABPS row from link reordering to preserve Edit Mode toggle
    • Prevented edit mode toggle from being affected by table changes

  4. Improved edit mode notification message

    • Changed from confusing "hover over plugins to customize"
    • Now clearly states "edit controls displayed below each plugin"

Summary of Fixes

1. Fixed Duplicate Search Box Issue

  • Problem: When entering edit mode or using WP native search, an extra search box would appear
  • Solution: Added a check in initPluginFiltering() to prevent creating multiple filter boxes (abps-features.js:237-242)
  • Result: Only one search box will exist, even when the table is re-initialized

2. Hidden Native WP Search & Using ABPS Search Instead

  • Problem: Both WP native search and ABPS search were visible
  • Solution: Added CSS to hide the WordPress native search boxes (abps-main.css:10-14)
  • Result: Only the superior ABPS search is visible, providing better filtering capabilities

3. Fixed Unable to Exit Edit Mode

  • Problem: Clicking "Exit Edit Mode" wouldn't work because the toggle link was being affected when features were re-initialized
  • Solution: Excluded the ABPS plugin row from link reordering to preserve the Edit Mode toggle (abps-features.js:56-59)
  • Result: Edit Mode toggle now works reliably - you can enter and exit edit mode without issues

4. Improved Edit Mode Notification Message

  • Problem: The message "hover over plugins to customize" was confusing
  • Solution: Changed to clearer message: "edit controls displayed below each plugin" (abps-ui.js:406)
  • Result: Users now understand that edit controls appear below each plugin row, not on hover

Technical Changes

Files Modified:

  • assets/js/abps-features.js - Duplicate search fix & ABPS row exclusion
  • assets/css/abps-main.css - Hide WP native search
  • assets/js/abps-ui.js - Improved notification message

All changes have been committed and pushed to branch claude/fix-duplicate-search-box-017az4vBMcKPv2yVPdLvJRLa.

@claude
Fix: Duplicate search box, edit mode issues, and UX improvements
9cd5b7e 
1. Fixed duplicate search box appearing in edit mode
   - Added check to prevent creating multiple filter boxes
   - Filter box is now created only once even when table changes

2. Hide WordPress native search and use ABPS search instead
   - Added CSS to hide WP native search (.search-box, .wp-filter .search-form)
   - ABPS search is superior with better filtering capabilities

3. Fixed unable to exit edit mode issue
   - Excluded ABPS row from link reordering to preserve Edit Mode toggle
   - Prevented edit mode toggle from being affected by table changes

4. Improved edit mode notification message
   - Changed from confusing "hover over plugins to customize"
   - Now clearly states "edit controls displayed below each plugin"
@claude
Refactor: Use native WP search with ABPS enhancements + hide update rows
a2abb69 
1. Replace custom search box with enhanced native WP search
   - Instead of creating separate ABPS search box, enhance the native WP search input
   - Update placeholder to "Search plugins (powered by A Better Plugins Screen)"
   - Prevent default form submission and use ABPS filtering
   - Add visual styling (blue border) to indicate ABPS is active
   - Prevents duplicate search boxes and provides clearer UX

2. Hide plugin update notification rows intelligently
   - Hide update rows when their parent plugin is filtered out
   - Hide all update rows in Edit Mode to reduce clutter
   - Prevents confusing orphaned update notices during search/filtering

Benefits:
- Cleaner UI: Single search box instead of two
- Better UX: Clear indication that ABPS is enhancing search
- Less confusion: Update notices hidden when not relevant
- More intuitive: Uses familiar WP search location
@claude
Fix: Add proper spacing/separators between action links
2a98aad 
Issues fixed:
1. Missing pipe separator between Deactivate and Settings in ABPS row
   - Added proper ' | ' text node separator
   - Now displays: "Deactivate | Settings | Edit Mode"

2. Enhanced form submission prevention for native search
   - Hide submit button to prevent accidental form submission
   - Multiple layers of preventDefault for reliability
   - Prevent Enter key from submitting form
   - Set form action to javascript:void(0)
   - Clear any existing ?s= URL parameter without reload

3. Better form handling prevents page reload
   - Page was reloading when Enter key was pressed in search
   - Now properly uses client-side ABPS filtering only
   - ABPS features remain active during search
@claude
Revert: Simplify search - hide native WP search, use custom ABPS sear…
13e055f 
…ch box

After attempting to enhance the native WP search input, page reloads were
still occurring. The simpler and more reliable approach is to:

1. Hide the native WordPress search completely
   - Added CSS: .search-form.search-plugins { display: none !important; }
   - This prevents any form submission or page reload issues

2. Create and display custom ABPS search box
   - Reverted to creating custom filter box with createFilterBox()
   - No form element = no form submission = no page reloads
   - Full control over behavior and styling
   - Clear "powered by A Better Plugins Screen" branding in placeholder

3. Benefits of this approach:
   - 100% client-side filtering with no possibility of page reload
   - ABPS features remain active during and after search
   - Cleaner implementation without complex form hijacking
   - Better UX with custom clear button and escape key handling

Changes:
- abps-main.css: Hide native search, restore ABPS filter box styles
- abps-features.js: Restore initPluginFiltering() to create custom box
- abps-config.js: Update placeholder text to indicate ABPS is active
@claude
Fix: Position ABPS search in native location + filter edit controls
1c8c9b5 
1. Position ABPS search box in the same location as native WP search
   - Find native search form (.search-form.search-plugins)
   - Insert ABPS search box right after it (as sibling)
   - Native search is hidden with CSS, ABPS search appears in its place
   - No more separate/custom positioning

2. Show edit controls ONLY for visible/filtered plugins
   - When filtering is active and user enables Edit Mode
   - Previously showed edit controls for ALL plugins (even hidden ones)
   - Now filters to only show controls for visible plugins
   - Checks row.style.display !== 'none' before rendering controls

3. ABPS plugin row always visible during filtering (intentional)
   - ABPS row is excluded from filtering (line 59: row.dataset.slug !== 'a-better-plugins-screen')
   - This is intentional so users can always access Settings and Edit Mode
   - Even when searching/filtering, ABPS controls remain accessible
@claude
Fix: Truly replace native search + edit row visibility in all workflows
c4e3d7d 
ISSUE 1: Search box positioning
Problem: ABPS search was being inserted after the form, not replacing it
         Navigation links were appearing above ABPS search
         Custom styling made it look different from native search

Solution:
- Find .search-box paragraph element inside native form
- Use replaceChild() to truly replace it (not just insert after)
- Remove custom box styling (padding, background, border)
- Match native WordPress search styling (280px width, smaller padding)
- Search now appears in EXACT same location as native search

ISSUE 2: Edit row visibility during filtering
Problem: Edit rows remained visible when parent plugin was filtered out
         This only worked if: Filter first → Enable edit mode
         But failed if: Enable edit mode → Filter

Solution:
- Added getEditRow() helper to find edit rows for plugins
- When filtering, also hide/show corresponding edit rows
- Use class-based hiding (.abps-filtered-out) for better CSS control
- Works in BOTH workflows:
  ✓ Filter first → Enable edit mode (only shows visible plugins)
  ✓ Enable edit mode → Filter (hides edit rows when plugins filtered)

Files changed:
- abps-features.js: Replace search box, hide edit rows during filtering
- abps-main.css: Remove custom box styling, add filtered-out class
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@brandonjp @claude