[#47672] - Fix calendar hover movement when using arrow keys in time input
- Pending
- Medium
- Build: 5.4-dev
- # 47672
- Diff
- pratibha-builds:fix-calendar-arrow-key-bug
User tests: Successful: Unsuccessful:
Pull Request resolves #47649.
- I read the Generative AI policy and my contribution is compatible with the policy and GNU/GPL 2 or later.
Summary of Changes
This PR fixes an issue where the calendar hover/selection state moves unexpectedly when using arrow keys (left/right) inside the time input field in the "Start Publishing" calendar.
The root cause was that the global calendar key event handler (_handleCalKeyEvent) was processing arrow key events even when the input field was focused. This caused unintended navigation of calendar dates while the user was only trying to move the cursor within the input.
The fix introduces a condition to ignore keyboard navigation when the active element is the input field:
- If the input field is focused → do not process arrow key navigation
- Otherwise → retain normal calendar keyboard navigation behavior
This ensures correct separation between input editing and calendar navigation.
Testing Instructions
- Go to Administrator → Content → Articles
- Create or edit any article
- Open the "Publishing" tab
- Click on the calendar icon for "Start Publishing"
- Select any date
- Click inside the input field (e.g.
2026-04-23 06:08:00) - Use Left (←) and Right (→) arrow keys to move the cursor within the time
Actual result BEFORE applying this Pull Request
-
When pressing arrow keys inside the input field:
- The cursor moves
- BUT the calendar in the background also moves
-
The hover/selection jumps across dates unexpectedly
-
Leads to confusing and incorrect UI behavior
🎥 Before fix video:
beforefix.mp4
Expected result AFTER applying this Pull Request
-
When pressing arrow keys inside the input field:
- Cursor moves correctly
- **Calendar does NOT move **
-
Calendar remains stable while editing time
-
No regression in normal keyboard navigation when interacting with the calendar directly
🎥 After fix video:
afterfix.mp4
Documentation 1: Code Behavior Change
Updated _handleCalKeyEvent to ignore arrow key navigation when the active element is the input field.
This prevents unintended calendar movement while editing time values.
Documentation 2: UX Improvement
Improves user experience by ensuring that keyboard navigation inside input fields behaves independently from the calendar UI, avoiding unexpected interactions.
Documentation 3: Backward Compatibility
No breaking changes introduced
Existing calendar navigation remains unchanged
Fix is scoped only to input-focused scenarios
Link to documentations
Please select:
- No documentation changes for guide.joomla.org needed
- No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | JavaScript Repository NPM Change |
all the useless codestyle changes make it impossible to review
I have tested this item 🔴 unsuccessfully on b5b9dad
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/47672.
I have tested this item 🔴 unsuccessfully on b5b9dad
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/47672.
This does NOT work - see video and the indicator of the keypressed at the bottom
keyviz_v5Foo8mIdq.mp4
| Labels |
Added:
NPM Resource Changed
PR-5.4-dev
|
||
all the useless codestyle changes make it impossible to review
Hi @brianteeman sorry for that unusual code style and for bug reproduction on console in the browser i have used console.log.
Now i have fixed it you can check the second one commit.
Still does not work - have you actually tested this yourself? Maybe its me abd you can provide a video of it working
This is the working video of the changes made.
On Thu, 23 Apr, 2026, 21:28 Brian Teeman, @.***> wrote:
brianteeman left a comment (#47672)
#47672Still does not work - have you actually tested this yourself? Maybe its me
abd you can provide a video of it working—
Reply to this email directly, view it on GitHub
#47672,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/BQ5UZ6QQDCH54K2WKCCP6ET4XI4QTAVCNFSM6AAAAACYD34S5CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DGMBVHEYDCMZWHA
.
Triage notifications, keep track of coding agent tasks and review pull
requests on the go with GitHub Mobile for iOS
https://github.com/notifications/mobile/ios/BQ5UZ6RUS2TSVOVDYM275TL4XI4QTA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIMZQGU4TAMJTGY4KM4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJKTGN5XXIZLSL5UW64Y
and Android
https://github.com/notifications/mobile/android/BQ5UZ6UJTWY6IWCN6JGDPL34XI4QTA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIMZQGU4TAMJTGY4KM4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJLTGN5XXIZLSL5QW4ZDSN5UWI.
Download it today!
You are receiving this because you were mentioned.Message ID:
@.***>
Hi @brianteeman sorry for that unusual code style and for bug reproduction on console in the browser i have used console.log. Now i have fixed it you can check the second one commit.
@pratibha-builds No. Your PR still contains a lot of unrelated code style changes. Please learn to check the result of your work on GitHub here: https://github.com/joomla/joomla-cms/pull/47672/changes
@pratibha-builds i cant see any video
Thanks for the feedback. I’ve updated the implementation and kept the changes minimal.
The issue is now resolved:
- When interacting with the time dropdown (hours/minutes) and using the left or right arrow keys, the calendar no longer changes its hover state.
- The selected date also remains stable and does not move unexpectedly.
Additionally, normal behavior is preserved:
- Arrow keys still work correctly within the input field.
- Dropdown controls function as expected without affecting the calendar.
Please let me know if any further adjustments are needed.
Please let me know if any further adjustments are needed.
@pratibha-builds There are pending review changes. Please merge them or comment on them and mark them as completed if they have already been implemented.
absolutely zero positive changes to the functionality since my last tests. Do you even test your work!!
absolutely zero positive changes to the functionality since my last tests. Do you even test your work!!
Hi @brianteeman i have tested it on my own system it was fully functional working also i have changed the code style.
@pratibha-builds You are doing a lot of code style changes in your PR which are not related to the issue. Please revert that.