UX: Fix edit tags/categories navigation menu modal has no focus on input (#22237)

What this change?

When a user opens the modal to edit tags or categories for the
navigation menu, we want to input filter to have focus. This commit
fixes that by doing the following:

1. Changes <DModal> component such that it prioritises elements with the
   autofocus attribute first.
2. Adds `autofocus` to the input elements on the edit tags/categories
   modal form.

app/assets/javascripts/discourse/app/components/d-modal.js

@@ -206,9 +206,11 @@ export default class DModal extends Component {
         // attempt to focus the first of the focusable elements or just the modal-body
         // to make it possible to scroll with arrow down/up
         (
+          autofocusedElement ||
           innerContainer.querySelector(
             focusableElements + ", button:not(.modal-close)"
-          ) || innerContainer.querySelector(".modal-body")
+          ) ||
+          innerContainer.querySelector(".modal-body")
         )?.focus();
       }
 

app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.hbs

@@ -28,6 +28,7 @@
           @type="text"
           @value={{this.filter}}
           {{on "input" (action "onFilterInput" value="target.value")}}
+          autofocus="true"
         />
       </div>
 

app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs

@@ -25,6 +25,7 @@
         @type="text"
         @value={{this.filter}}
         {{on "input" (action "onFilterInput" value="target.value")}}
+        autofocus="true"
       />
     </div>
 

spec/system/editing_sidebar_categories_navigation_spec.rb

@@ -33,6 +33,7 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do
     modal = sidebar.click_edit_categories_button
 
     expect(modal).to have_right_title(I18n.t("js.sidebar.categories_form_modal.title"))
+    try_until_success { expect(modal).to have_focus_on_filter_input }
     expect(modal).to have_parent_category_color(category)
     expect(modal).to have_category_description_excerpt(category)
     expect(modal).to have_parent_category_color(category2)

spec/system/editing_sidebar_tags_navigation_spec.rb

@@ -34,6 +34,7 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
     modal = sidebar.click_edit_tags_button
 
     expect(modal).to have_right_title(I18n.t("js.sidebar.tags_form_modal.title"))
+    try_until_success { expect(modal).to have_focus_on_filter_input }
     expect(modal).to have_tag_checkboxes([tag1, tag2, tag3])
 
     modal.toggle_tag_checkbox(tag1).toggle_tag_checkbox(tag2).save

spec/system/page_objects/modals/sidebar_edit_categories.rb

@@ -79,6 +79,11 @@ module PageObjects
       def has_no_reset_to_defaults_button?
         has_no_button?(I18n.t("js.sidebar.categories_form_modal.reset_to_defaults"))
       end
+
+      def has_focus_on_filter_input?
+        evaluate_script("document.activeElement").native ==
+          find(".sidebar-categories-form-modal .sidebar-categories-form__filter-input-field").native
+      end
     end
   end
 end

spec/system/page_objects/modals/sidebar_edit_tags.rb

@@ -55,6 +55,11 @@ module PageObjects
         click_button(I18n.t("js.sidebar.tags_form_modal.reset_to_defaults"))
         self
       end
+
+      def has_focus_on_filter_input?
+        evaluate_script("document.activeElement").native ==
+          find(".sidebar-tags-form-modal .sidebar-tags-form__filter-input-field").native
+      end
     end
   end
 end