WordPress+WooCommerce站点登录下拉框遇Chrome账号建议消失问题求助

Hey Alberto, I’ve dealt with this exact quirk on the XStore theme before, so let’s walk through why it’s happening and the best ways to fix it.

Why This Happens #

The XStore login dropdown uses a mouseleave event to hide itself when your cursor moves outside its container. The problem? Chrome’s autofill suggestions are browser-native elements that sit outside the theme’s dropdown HTML structure. So when you hover over a saved login suggestion, Chrome thinks your cursor left the dropdown entirely, triggering the hide action before you can click the suggestion.

Solution 1: Add a Delay to the Dropdown Hide Logic (Most Reliable) #

We can tweak the theme’s JavaScript to add a short delay before hiding the dropdown, giving you time to click the autofill suggestion. Here’s how:

1. Head to your WordPress dashboard → Appearance → Customize → Additional CSS/JS (or use a child theme’s functions.php to enqueue custom JS if you prefer).
2. Paste this JavaScript code:

jQuery(document).ready(function($) {
    // Target the XStore login dropdown container (adjust selector if your theme uses a different class)
    const loginDropdown = $('.login-dropdown');
    
    let hideTimer;
    
    // Add delay when leaving the dropdown
    loginDropdown.on('mouseleave', function() {
        hideTimer = setTimeout(() => {
            loginDropdown.addClass('hidden'); // Match the theme's default hide class
        }, 200); // 200ms is enough time to click a suggestion
    });
    
    // Cancel the delay if cursor comes back into the dropdown
    loginDropdown.on('mouseenter', function() {
        clearTimeout(hideTimer);
    });
    
    // Extra safety: Cancel delay if hovering over the input fields themselves
    $(document).on('mouseenter', 'input[name="username"], input[name="password"]', function() {
        clearTimeout(hideTimer);
    });
});

Quick note: If .login-dropdown doesn’t target your dropdown, right-click the dropdown in Chrome DevTools and inspect it to find the correct class/ID.

Solution 2: Expand the Dropdown’s Hover Area (CSS Trick) #

Another workaround is to make the dropdown’s "hover zone" extend downward to cover where Chrome’s autofill suggestions appear. This tricks the browser into thinking your cursor is still inside the dropdown:

Add this CSS to Appearance → Customize → Additional CSS:

/* Expand dropdown hover area to cover autofill suggestions */
.login-dropdown {
    padding-bottom: 150px; /* Adjust this based on how many suggestions usually show up */
    margin-bottom: -150px; /* Offset padding so it doesn't mess up your layout */
    pointer-events: auto;
}

/* Make sure the form container doesn't clip the extended area */
.login-dropdown .login-form-container {
    overflow: visible !important;
}

Solution 3: Disable Chrome Autofill (Last Resort) #

If the above methods don’t work, you can turn off Chrome’s autofill for the login fields entirely. Keep in mind this hurts user experience, so only use this as a fallback:

Add this code to your theme’s functions.php (or use a custom plugin):

add_action('wp_footer', function() { ?>
    <script>
        jQuery(document).ready(function($) {
            // Tell Chrome not to autofill these fields
            $('input[name="username"], input[name="password"]').attr('autocomplete', 'new-password');
        });
    </script>
<?php });

How to Test #

After setting up any solution:

1. Save a login credential for your site in Chrome
2. Hover over the "Login/Register" menu to open the dropdown
3. Click the username/email field and hover over the autofill suggestion – the dropdown should stay open until you click the suggestion or move your cursor away from both the dropdown and suggestions.

内容的提问来源于stack exchange，提问作者ALBERTO RAVELLI