mirror of
https://github.com/discourse/discourse.git
synced 2025-02-07 20:08:26 +00:00
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.
This commit is contained in:
parent
b25225f704
commit
d875e6e998
@ -206,9 +206,11 @@ export default class DModal extends Component {
|
|||||||
// attempt to focus the first of the focusable elements or just the modal-body
|
// attempt to focus the first of the focusable elements or just the modal-body
|
||||||
// to make it possible to scroll with arrow down/up
|
// to make it possible to scroll with arrow down/up
|
||||||
(
|
(
|
||||||
|
autofocusedElement ||
|
||||||
innerContainer.querySelector(
|
innerContainer.querySelector(
|
||||||
focusableElements + ", button:not(.modal-close)"
|
focusableElements + ", button:not(.modal-close)"
|
||||||
) || innerContainer.querySelector(".modal-body")
|
) ||
|
||||||
|
innerContainer.querySelector(".modal-body")
|
||||||
)?.focus();
|
)?.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -28,6 +28,7 @@
|
|||||||
@type="text"
|
@type="text"
|
||||||
@value={{this.filter}}
|
@value={{this.filter}}
|
||||||
{{on "input" (action "onFilterInput" value="target.value")}}
|
{{on "input" (action "onFilterInput" value="target.value")}}
|
||||||
|
autofocus="true"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -25,6 +25,7 @@
|
|||||||
@type="text"
|
@type="text"
|
||||||
@value={{this.filter}}
|
@value={{this.filter}}
|
||||||
{{on "input" (action "onFilterInput" value="target.value")}}
|
{{on "input" (action "onFilterInput" value="target.value")}}
|
||||||
|
autofocus="true"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -33,6 +33,7 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do
|
|||||||
modal = sidebar.click_edit_categories_button
|
modal = sidebar.click_edit_categories_button
|
||||||
|
|
||||||
expect(modal).to have_right_title(I18n.t("js.sidebar.categories_form_modal.title"))
|
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_parent_category_color(category)
|
||||||
expect(modal).to have_category_description_excerpt(category)
|
expect(modal).to have_category_description_excerpt(category)
|
||||||
expect(modal).to have_parent_category_color(category2)
|
expect(modal).to have_parent_category_color(category2)
|
||||||
|
@ -34,6 +34,7 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
|
|||||||
modal = sidebar.click_edit_tags_button
|
modal = sidebar.click_edit_tags_button
|
||||||
|
|
||||||
expect(modal).to have_right_title(I18n.t("js.sidebar.tags_form_modal.title"))
|
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])
|
expect(modal).to have_tag_checkboxes([tag1, tag2, tag3])
|
||||||
|
|
||||||
modal.toggle_tag_checkbox(tag1).toggle_tag_checkbox(tag2).save
|
modal.toggle_tag_checkbox(tag1).toggle_tag_checkbox(tag2).save
|
||||||
|
@ -79,6 +79,11 @@ module PageObjects
|
|||||||
def has_no_reset_to_defaults_button?
|
def has_no_reset_to_defaults_button?
|
||||||
has_no_button?(I18n.t("js.sidebar.categories_form_modal.reset_to_defaults"))
|
has_no_button?(I18n.t("js.sidebar.categories_form_modal.reset_to_defaults"))
|
||||||
end
|
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
|
end
|
||||||
end
|
end
|
||||||
|
@ -55,6 +55,11 @@ module PageObjects
|
|||||||
click_button(I18n.t("js.sidebar.tags_form_modal.reset_to_defaults"))
|
click_button(I18n.t("js.sidebar.tags_form_modal.reset_to_defaults"))
|
||||||
self
|
self
|
||||||
end
|
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
|
end
|
||||||
end
|
end
|
||||||
|
Loading…
x
Reference in New Issue
Block a user