Commit b4b41b4c authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'focus-emoji-search-field' into 'master'

Auto-focus emoji award search field

![emoji-search-focus](/uploads/7cd0448e00ced19d3cf1c4fdd141c74f/emoji-search-focus.gif)

Closes #12621 

cc. @jschatz1 

See merge request !2650
parents 22772871 5a04fc90
...@@ -4,6 +4,7 @@ class @AwardsHandler ...@@ -4,6 +4,7 @@ class @AwardsHandler
event.stopPropagation() event.stopPropagation()
event.preventDefault() event.preventDefault()
$(".emoji-menu").show() $(".emoji-menu").show()
$("#emoji_search").focus()
$("html").on 'click', (event) -> $("html").on 'click', (event) ->
if !$(event.target).closest(".emoji-menu").length if !$(event.target).closest(".emoji-menu").length
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
- if current_user - if current_user
.awards-controls .awards-controls
%a.add-award{"data-toggle" => "dropdown", "data-target" => "#", "href" => "#"} %a.add-award{"href" => "#"}
= icon('smile-o') = icon('smile-o')
.emoji-menu .emoji-menu
.emoji-menu-content .emoji-menu-content
......
...@@ -9,6 +9,7 @@ Feature: Award Emoji ...@@ -9,6 +9,7 @@ Feature: Award Emoji
@javascript @javascript
Scenario: I add and remove award in the issue Scenario: I add and remove award in the issue
Given I click to emoji-picker Given I click to emoji-picker
Then The search field is focused
And I click to emoji in the picker And I click to emoji in the picker
Then I have award added Then I have award added
And I can remove it by clicking to icon And I can remove it by clicking to icon
...@@ -16,11 +17,13 @@ Feature: Award Emoji ...@@ -16,11 +17,13 @@ Feature: Award Emoji
@javascript @javascript
Scenario: I can see the list of emoji categories Scenario: I can see the list of emoji categories
Given I click to emoji-picker Given I click to emoji-picker
Then The search field is focused
Then I can see the activity and food categories Then I can see the activity and food categories
@javascript @javascript
Scenario: I can search emoji Scenario: I can search emoji
Given I click to emoji-picker Given I click to emoji-picker
Then The search field is focused
And I search "hand" And I search "hand"
Then I see search result for "hand" Then I see search result for "hand"
......
...@@ -66,4 +66,8 @@ class Spinach::Features::AwardEmoji < Spinach::FeatureSteps ...@@ -66,4 +66,8 @@ class Spinach::Features::AwardEmoji < Spinach::FeatureSteps
expect(page).to have_selector '[data-emoji="raised_hand"]' expect(page).to have_selector '[data-emoji="raised_hand"]'
end end
end end
step 'The search field is focused' do
page.evaluate_script("document.activeElement.id").should eq "emoji_search"
end
end end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment