Bug #3229
Enable Search Functionality on "Enter" Key Press in Charging Station Management
Added by Shreya Agarwal 14 days ago.
Updated 13 days ago.
Description
Current Behavior:
In the "Charging Station Management" module, the user has to click the "Apply" button to execute a search after entering text into the search fields (e.g., Search, Location, Status , state ).
Expected Behavior:
The search should also be triggered when the user presses the "Enter" key on their keyboard. This should replicate the exact behavior of clicking the "Apply" button.
Acceptance Criteria:
Pressing "Enter" in the "Search", "Location", or "Status" input fields should trigger the search function.
The objective of this task was to enable search functionality on the keyboard "Enter" key press within the Charging Station Management page (/charging-station-management) on branch feature/shreya/3229-search-on-enter-key-charging-station-management-ui. Previously, users had to manually click the "Apply" button using the mouse to trigger the search/filter request. The requirement was to provide the exact same search behavior upon pressing the keyboard "Enter" key across all filter controls, while keeping the "Apply" and "Reset" buttons completely intact, dynamic, and free of any hardcoded values.
Implementation Details:
In
ChargingStationManagementPage.tsx
, a key listener handler was implemented and integrated with the filter fields: the Search input (TextField), Location dropdown (Select), Status dropdown (Select), and State dropdown (Select). To resolve Material-UI's default behavior where pressing "Enter" on a closed dropdown would repeatedly reopen the dropdown menu, event handling was bound using onKeyDownCapture with stopPropagation() and preventDefault(). This ensures that pressing "Enter" on any filter directly triggers the search operation without reopening the dropdown popup.this task is completed
also i continue learning react for my understanding and enhance knowledge
Also available in: Atom
PDF