Autofocus the clicked field upon the modal opening

In order to forward context to the modal, it will autofocus the clicked
on field that triggered it to open.

app/components/_index.sass

@@ -1,6 +1,6 @@
 @import "work_packages/share/modal_body_component"
 @import "work_packages/share/invite_user_form_component"
-@import "work_packages/progress/progress_modal"
+@import "work_packages/progress/modal_body_component"
 @import "open_project/common/attribute_component"
 @import "filters_component"
 @import "projects/settings/project_custom_field_sections/index_component"

app/components/work_packages/progress/modal_body_component.html.erb

@@ -1,11 +1,12 @@
 <%= turbo_frame_tag "work_package_progress_modal" do %>
   <%= primer_form_with(
-      model: work_package,
-      url: work_package_progress_path(work_package),
-      id: 'blah') do |f| %>
+        model: work_package,
+        url: work_package_progress_path(work_package),
+        class: 'progress-form',
+        id: 'progress-form') do |f| %>
     <%= flex_layout do |modal_body| %>
       <% modal_body.with_row do |_fields| %>
-        <%= render(WorkPackages::ProgressForm.new(f)) %>
+        <%= render(WorkPackages::ProgressForm.new(f, focused_field: focused_field)) %>
       <% end %>
 
       <% modal_body.with_row(mt: 3) do |_tooltip| %>

app/components/work_packages/progress/modal_body_component.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 # -- copyright
 # OpenProject is an open source project management software.
 # Copyright (C) 2010-2024 the OpenProject GmbH
@@ -33,12 +35,34 @@ class ModalBodyComponent < ApplicationComponent
       include Turbo::FramesHelper
       include OpPrimer::ComponentHelpers
 
-      attr_reader :work_package
+      attr_reader :work_package, :focused_field
+
+      FIELD_MAP = {
+        "estimatedTime" => :estimated_hours,
+        "remainingTime" => :remaining_hours
+      }.freeze
 
-      def initialize(work_package)
+      def initialize(work_package, focused_field:)
         super()
 
         @work_package = work_package
+        @focused_field = map_field(focused_field)
+      end
+
+      private
+
+      def map_field(field)
+        # Scenarios when a field is not provided occur after a
+        # form submission since the last focused element
+        # was the submit button. In this case, don't focus on
+        # an element by default.
+        return nil if field.nil?
+
+        field = FIELD_MAP[field.to_s]
+
+        return field if field.present?
+
+        raise ArgumentError, "The selected field is not one of #{FIELD_MAP.keys.join(', ')}."
       end
     end
   end

app/components/work_packages/progress/modal_body_component.sass

@@ -0,0 +1,5 @@
+.progress-form
+  .input--readonly
+    background-color: unset !important
+    border: none !important
+    box-shadow: none !important

app/controllers/work_packages/progress_controller.rb

@@ -33,7 +33,7 @@ class WorkPackages::ProgressController < ApplicationController
   before_action :set_work_package
 
   def edit
-    render WorkPackages::Progress::ModalBodyComponent.new(@work_package)
+    render WorkPackages::Progress::ModalBodyComponent.new(@work_package, focused_field: params[:field])
   end
 
   def update

app/forms/work_packages/progress_form.rb

@@ -27,25 +27,31 @@
 # ++
 
 class WorkPackages::ProgressForm < ApplicationForm
-  include OpenProject::StaticRouting::UrlHelpers
+  def initialize(focused_field:)
+    super()
+
+    @focused_field = focused_field
+  end
 
   form do |query_form|
     query_form.group(layout: :horizontal) do |group|
       group.text_field(
         name: :estimated_hours,
-        label: "Work"
+        label: "Work",
+        autofocus: @focused_field == :estimated_hours
       )
 
       group.text_field(
         name: :remaining_hours,
-        label: "Remaining work"
+        label: "Remaining work",
+        autofocus: @focused_field == :remaining_hours
       )
 
       group.text_field(
         name: :done_ratio,
         label: "% Complete",
         readonly: true,
-        classes: "boob"
+        classes: "input--readonly"
       )
     end
   end

app/views/work_packages/progress/update.turbo_stream.erb

@@ -1,3 +1,3 @@
 <%= turbo_stream.update "work_package_progress_modal" do %>
-  <%= render WorkPackages::Progress::ModalBodyComponent.new(@work_package) %>
+  <%= render WorkPackages::Progress::ModalBodyComponent.new(@work_package, focused_field: params[:field]) %>
 <% end %>

frontend/src/app/shared/components/fields/edit/field-types/progress-popover-edit-field.component.ts

@@ -90,8 +90,12 @@ export class ProgressPopoverEditFieldComponent extends ProgressEditFieldComponen
 
   ngOnInit() {
     super.ngOnInit();
+    /*
+      Append clicked field name to URL query props
+      in order to indicate which field should be focused on load.
+    */
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    this.frameSrc = this.pathHelper.workPackageProgressModalPath(this.resource.id as string);
+    this.frameSrc = `${this.pathHelper.workPackageProgressModalPath(this.resource.id as string)}?field=${this.name}`;
     this.frameId = 'work_package_progress_modal';
   }