Skip to content

Conversation

@KumJungMin
Copy link
Contributor

@KumJungMin KumJungMin commented Apr 6, 2025

Defect Fixes


How To Resolve

Issue Summary

  1. The dropdown is in a filterable state.
  2. A user types a keyword (e.g., au).
  3. Then hovers the mouse or keyArrowDown over an item (e.g., Australia).
  4. The user focuses the filter input again.
  5. Issue: When pressing Escape, the hovered item gets selected instead of closing the overlay.

Expected Behavior

  • In version 10.4.0, pressing Escape simply closes the overlay without selecting any item:
  • Related commit: 5c6b96e
  • Relevant logic:
const onFilterInputKeyDown = (event) => {
    switch (event.code) {
        ...
        case 'Escape':
        case 'Enter':
            hide(); // Expected: Close the dropdown
            event.preventDefault();
            break;
        ...
    }
};

const hide = () => {
    setOverlayVisibleState(false);
};

Root Cause

  • Since this PR, the Escape key no longer triggers hide(), but instead calls onEnterKey() — the logic used for selecting items.
const onFilterInputKeyDown = (event) => {
    switch (event.code) {
        ...
        case 'Escape':
        case 'Enter':
            onEnterKey(); // Causes item selection even on Escape
            event.preventDefault();
            break;
        ...
    }
};

const onEnterKey = (event) => {
    if (!overlayVisibleState) {
        setFocusedOptionIndex(-1);
        onArrowDownKey(event);
    } else {
        if (focusedOptionIndex !== -1) {
            onOptionSelect(event, visibleOptions[focusedOptionIndex]);
        }
    }
    event.preventDefault();
};

Fix Applied

  • To restore the expected behavior (as in version 10.4.0),
  • I updated the logic so that pressing Escape triggers a onEscapeKey(), instead of calling onEnterKey().
const onFilterInputKeyDown = (event) => {
    switch (event.code) {
        ...
        case 'Enter':
            onEnterKey();
            event.preventDefault();
            break;
        case 'Escape':
            onEscapeKey(); // ✅ Fixed behavior
            break;
        ...
    }
};

Test Results

Before Fix: Pressing Escape causes the hovered item to be selected.

Hovered via mouse Hovered via keyboard (ArrowDown)
2025-04-06.4.47.39.mov
problem1.mov

After Fix: Pressing Escape correctly closes the overlay without selecting any item.

Hovered via mouse Hovered via keyboard (ArrowDown)
result.mov
2025-04-06.5.23.03.mov

@vercel
Copy link

vercel bot commented Apr 6, 2025

Deployment failed with the following error:

Creating the Deployment Timed Out.

@melloware melloware merged commit d198a4b into primefaces:master Apr 6, 2025
4 of 5 checks passed
@KumJungMin KumJungMin deleted the fix/issue-7828 branch April 7, 2025 03:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dropdown: selecting the option when esc key pressed

2 participants