From d875e6e9988c21e743230f858cb4c07d3f75ef7b Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Thu, 22 Jun 2023 09:56:12 +0800 Subject: [PATCH] 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 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 | 4 +++- .../app/components/sidebar/categories-form-modal.hbs | 1 + .../discourse/app/components/sidebar/tags-form-modal.hbs | 1 + spec/system/editing_sidebar_categories_navigation_spec.rb | 1 + spec/system/editing_sidebar_tags_navigation_spec.rb | 1 + spec/system/page_objects/modals/sidebar_edit_categories.rb | 5 +++++ spec/system/page_objects/modals/sidebar_edit_tags.rb | 5 +++++ 7 files changed, 17 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/discourse/app/components/d-modal.js b/app/assets/javascripts/discourse/app/components/d-modal.js index 7890e49a07d..3190663397c 100644 --- a/app/assets/javascripts/discourse/app/components/d-modal.js +++ b/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(); } diff --git a/app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.hbs b/app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.hbs index a7693476b98..83d2fa7271c 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.hbs +++ b/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" /> diff --git a/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs b/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs index e1e7e8dbe47..e55aa92d8f5 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs +++ b/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" /> diff --git a/spec/system/editing_sidebar_categories_navigation_spec.rb b/spec/system/editing_sidebar_categories_navigation_spec.rb index e83d7c72d0e..84cca565be9 100644 --- a/spec/system/editing_sidebar_categories_navigation_spec.rb +++ b/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) diff --git a/spec/system/editing_sidebar_tags_navigation_spec.rb b/spec/system/editing_sidebar_tags_navigation_spec.rb index 131153197ac..a8c044517df 100644 --- a/spec/system/editing_sidebar_tags_navigation_spec.rb +++ b/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 diff --git a/spec/system/page_objects/modals/sidebar_edit_categories.rb b/spec/system/page_objects/modals/sidebar_edit_categories.rb index bc8a3eba38f..45caa309baf 100644 --- a/spec/system/page_objects/modals/sidebar_edit_categories.rb +++ b/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 diff --git a/spec/system/page_objects/modals/sidebar_edit_tags.rb b/spec/system/page_objects/modals/sidebar_edit_tags.rb index 8355d5c210b..933dff90e36 100644 --- a/spec/system/page_objects/modals/sidebar_edit_tags.rb +++ b/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