[#65618] Remove jQuery from core #19429

myabc · 2025-07-06T17:23:47Z

⚠️ ~~This PR includes commits from #20846. Please review/merge that first.~~

Ticket

https://community.openproject.org/wp/65618

What are you trying to accomplish?

Screenshots

What approach did you choose and why?

Merge checklist

Copilot

Pull Request Overview

This PR removes jQuery dependencies from the OpenProject core codebase, replacing jQuery APIs with native DOM APIs and modern JavaScript/TypeScript alternatives. The changes include migrating event listeners, DOM manipulation, element selection, CSS manipulation, and AJAX operations away from jQuery while maintaining the same functionality.

Key changes:

Replace jQuery selectors with document.querySelector/querySelectorAll
Replace jQuery event binding (.on(), .off()) with native addEventListener/removeEventListener
Replace jQuery DOM manipulation methods with native alternatives
Update type definitions from JQuery.TriggeredEvent to native Event, MouseEvent, KeyboardEvent

Reviewed Changes

Copilot reviewed 138 out of 139 changed files in this pull request and generated 25 comments.

Show a summary per file

File	Description
frontend/package.json	Adds dependencies for jQuery-free event delegation (`@knowledgecode/delegate`) and slide animations (`es6-slide-up-down`)
frontend/src/app/shared/helpers/dom-helpers.ts	New utility module providing jQuery-like helper functions using native DOM APIs
modules/*/frontend/module/git-actions-menu/git-actions-menu.directive.ts	Updates event type from `JQuery.TriggeredEvent` to `Event`
modules/budgets/frontend/module/augment/planned-costs-form.ts	Replaces jQuery event delegation with `@knowledgecode/delegate` library
frontend/src/turbo/turbo-global-listeners.ts	Replaces jQuery `.each()` with native `forEach()`
frontend/src/app/shared/helpers/link-handling/link-handling.ts	Updates event type from `JQuery.TriggeredEvent` to `MouseEvent`
frontend/src/app/shared/helpers/drag-and-drop/dom-autoscroll.service.ts	Replaces jQuery event binding with native `addEventListener`
frontend/src/app/shared/directives//.ts	Multiple directive files updating from jQuery element references to native HTMLElement
frontend/src/app/shared/components//.ts	Component files migrating from jQuery to native DOM APIs for element manipulation and event handling
frontend/src/app/features/work-packages/components/wp-table/*.ts	Work package table components replacing jQuery with native DOM operations
frontend/src/app/features/calendar/*.ts	Calendar components removing jQuery tooltip and DOM manipulation calls
frontend/src/app/core/setup/globals/*.ts	Global listener setup replacing jQuery with native event handling

Files not reviewed (1)

frontend/package-lock.json: Language not supported

frontend/src/app/shared/helpers/dom-helpers.ts

frontend/src/app/shared/helpers/drag-and-drop/dom-autoscroll.service.ts

frontend/src/app/core/setup/globals/global-listeners/settings.ts

frontend/src/app/core/setup/globals/global-listeners/danger-zone-validation.ts

frontend/src/app/core/setup/globals/global-listeners/setup-server-response.ts

frontend/src/app/core/top-menu/top-menu.service.ts

...p/features/work-packages/components/wp-fast-table/builders/relations/relation-row-builder.ts

frontend/src/app/features/work-packages/components/wp-fast-table/handlers/row/click-handler.ts

frontend/src/app/core/main-menu/main-menu-toggle.service.ts

frontend/src/app/core/setup/globals/global-listeners/setup-server-response.ts

frontend/src/app/features/calendar/te-calendar/te-calendar.component.ts

...tend/src/app/shared/components/op-context-menu/handlers/op-context-menu-trigger.directive.ts

frontend/src/app/shared/components/op-context-menu/op-context-menu.service.ts

frontend/src/app/features/boards/board/add-card-dropdown/add-card-dropdown-menu.directive.ts

...tend/src/app/shared/components/op-context-menu/handlers/op-columns-context-menu.directive.ts

...tend/src/app/shared/components/op-context-menu/handlers/op-context-menu-trigger.directive.ts

...nd/src/app/shared/components/op-context-menu/handlers/op-settings-dropdown-menu.directive.ts

...tend/src/app/shared/components/op-context-menu/handlers/wp-create-settings-menu.directive.ts

...ponents/op-context-menu/icon-triggered-context-menu/icon-triggered-context-menu.component.ts

frontend/src/app/shared/components/op-context-menu/wp-context-menu/wp-single-context-menu.ts

.../src/app/shared/components/op-context-menu/wp-context-menu/wp-view-context-menu.directive.ts

frontend/src/app/shared/components/op-context-menu/op-context-menu-handler.ts

Fixes: <internal:warning>:54:in 'Kernel.warn': Locator Type:#<Type id: 1008, name: "Type No. 1", position: 5, is_in_roadmap: true, is_milestone: false, is_default: false, color_id: nil, created_at: "2025-11-04 12:57:37.377907000 +0000", updated_at: "2025-11-04 12:57:37.377926000 +0000", is_standard: false, attribute_groups: [], description: nil, patterns: #<data WorkPackageTypes::Patterns::Collection patterns={}>, pdf_export_templates_config: {}> for selector :option must be an instance of String or Symbol or Integer. This will raise an error in a future version of Capybara. Called from: /home/git-repos/openproject/modules/backlogs/spec/support/pages/backlogs.rb:61 (StructuredWarnings::BuiltInWarning) <internal:warning>:54:in 'Kernel.warn': Locator Integer:255 for selector :link must be an instance of String or Symbol or Array. This will raise an error in a future version of Capybara. Called from: /home/git-repos/openproject/modules/backlogs/spec/support/pages/backlogs.rb:214 (StructuredWarnings::BuiltInWarning)

myabc · 2025-11-04T13:49:38Z

frontend/src/app/shared/directives/op-drag-scroll/op-drag-scroll.directive.ts

+      element.dispatchEvent(
+        new CustomEvent('op:dragscroll', {
+          detail: {
+            x: evt.clientX - mousedownX,
+            y: evt.clientY - mousedownY,
+          },
+        }),
+      );


⚠️ Check are we event listening for this event?

Ensure menu positioning is complete. Make focus take place after next repaint.

myabc · 2025-11-04T17:55:49Z

frontend/src/app/core/setup/globals/global-listeners/action-menu.ts

+      dropDown.querySelector<HTMLAnchorElement>('li > a:first-child')?.focus();
      // when clicking on something, which is not the menu, close the menu
-      jQuery('html').on('click', { menu: menu.get(0) }, closeMenu);
+      document.addEventListener('click', (evt) => closeMenu(menu, evt), { once: true });


Replaces inline jQuery code with `select-autosize` Stimulus controller. Also applies inline style to fix select height.

myabc changed the title ~~Code maintenance/rid jquery~~ [#65618] Remove jQuery from core Jul 8, 2025

myabc added maintenance DO NOT MERGE javascript Pull requests that update Javascript code labels Jul 8, 2025

myabc force-pushed the code-maintenance/luxon branch from 28d3b33 to dabe404 Compare July 15, 2025 10:45

myabc force-pushed the code-maintenance/rid-jquery branch from 8ecb545 to c7be23c Compare July 15, 2025 10:57

myabc force-pushed the code-maintenance/luxon branch from dabe404 to 12c2e01 Compare July 23, 2025 16:15

myabc force-pushed the code-maintenance/luxon branch 8 times, most recently from 8c63a12 to 5d26905 Compare September 28, 2025 22:45

myabc force-pushed the code-maintenance/luxon branch 2 times, most recently from af9f3f5 to 84518cd Compare October 28, 2025 11:46

myabc force-pushed the code-maintenance/rid-jquery branch from c7be23c to c0ad5e2 Compare October 28, 2025 13:13

myabc requested a review from Copilot October 28, 2025 13:14

myabc changed the base branch from code-maintenance/luxon to dev October 28, 2025 13:15

Copilot AI reviewed Oct 28, 2025

View reviewed changes

myabc commented Oct 28, 2025

View reviewed changes

...p/features/work-packages/components/wp-fast-table/builders/relations/relation-row-builder.ts Show resolved Hide resolved

myabc commented Oct 28, 2025

View reviewed changes

frontend/src/app/features/work-packages/components/wp-fast-table/handlers/row/click-handler.ts Outdated Show resolved Hide resolved

myabc force-pushed the code-maintenance/rid-jquery branch from c0ad5e2 to 07e86f2 Compare October 28, 2025 18:31

github-advanced-security bot found potential problems Oct 28, 2025

View reviewed changes

myabc force-pushed the code-maintenance/rid-jquery branch from 0b5ff43 to 24f8775 Compare October 28, 2025 20:57

github-advanced-security bot found potential problems Oct 28, 2025

View reviewed changes

myabc force-pushed the code-maintenance/rid-jquery branch from 24f8775 to 9e4b33c Compare October 28, 2025 22:59

myabc requested a review from Copilot October 28, 2025 23:00

github-advanced-security bot found potential problems Oct 28, 2025

View reviewed changes

frontend/src/app/shared/components/op-context-menu/op-context-menu-handler.ts Fixed Show fixed Hide fixed

myabc force-pushed the code-maintenance/rid-jquery branch from a5ceaf4 to c901941 Compare November 4, 2025 09:27

github-actions bot temporarily deployed to gh-6899875-pr-19429 November 4, 2025 09:28 Inactive

Merge branch 'dev' into code-maintenance/rid-jquery

0143e7c

github-actions bot temporarily deployed to gh-6899875-pr-19429 November 4, 2025 09:36 Inactive

myabc added 3 commits November 4, 2025 12:47

Fix missing variable declaration in Backlogs

8309b32

Modernize Backlogs server variables: use const/let

b958b5b

github-actions bot temporarily deployed to gh-6899875-pr-19429 November 4, 2025 13:06 Inactive

myabc commented Nov 4, 2025

View reviewed changes

Fix single-hierarchy-row-builder w/null subject cell

829818d

github-actions bot temporarily deployed to gh-6899875-pr-19429 November 4, 2025 16:36 Inactive

myabc added 2 commits November 4, 2025 17:53

Fix focusing on first context menu item

7e63b60

Ensure menu positioning is complete. Make focus take place after next repaint.

Ensure Work Package Export scenario awaits dialog

93f508e

github-actions bot temporarily deployed to gh-6899875-pr-19429 November 4, 2025 17:54 Inactive

myabc commented Nov 4, 2025

View reviewed changes

myabc added 3 commits November 4, 2025 18:32

Replace jQuery in work_package_full_view_tour.ts

dbb5534

Remove unused js format from CategoriesController

0aeeb3d

Remove unused versions/create.js.erb view

bfac4c2

github-actions bot temporarily deployed to gh-6899875-pr-19429 November 4, 2025 18:51 Inactive

Rework Wiki edit parent page form with Stimulus

51d3486

Replaces inline jQuery code with `select-autosize` Stimulus controller. Also applies inline style to fix select height.

github-actions bot temporarily deployed to gh-6899875-pr-19429 November 4, 2025 19:40 Inactive

Remove unused session/_warn_logout.js.erb view

6d190e2

github-actions bot temporarily deployed to gh-6899875-pr-19429 November 4, 2025 19:47 Inactive

Remove unused inline script from Cost Types list

37dcd13

myabc added this to the 17.0.x milestone Nov 4, 2025

github-actions bot deployed to gh-6899875-pr-19429 November 4, 2025 19:55 View deployment

Remove unused jQuery typings

9e0b6f5

myabc added needs review and removed DO NOT MERGE labels Nov 4, 2025

myabc mentioned this pull request Nov 4, 2025

[#68734] Migrate legacy Settings JS/TS to Stimulus #20884

Open

3 tasks

[#65618] Remove jQuery from core #19429

Are you sure you want to change the base?

[#65618] Remove jQuery from core #19429

Uh oh!

Conversation

myabc commented Jul 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Ticket

What are you trying to accomplish?

Screenshots

What approach did you choose and why?

Merge checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

myabc Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

myabc Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

myabc commented Jul 6, 2025 •

edited

Loading