Skip to content

Allow focus to move from the search field when there's text in it#1530

Merged
brisad merged 2 commits into
firefox-devtools:masterfrom
brisad:allow-focus-to-move-from-search-field
Dec 4, 2018
Merged

Allow focus to move from the search field when there's text in it#1530
brisad merged 2 commits into
firefox-devtools:masterfrom
brisad:allow-focus-to-move-from-search-field

Conversation

@brisad

@brisad brisad commented Nov 27, 2018

Copy link
Copy Markdown
Contributor

Fixes #1529

@codecov

codecov Bot commented Nov 27, 2018

Copy link
Copy Markdown

Codecov Report

Merging #1530 into master will decrease coverage by 0.08%.
The diff coverage is 33.33%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1530      +/-   ##
==========================================
- Coverage   81.29%   81.21%   -0.09%     
==========================================
  Files         160      159       -1     
  Lines       11120    11077      -43     
  Branches     2746     2736      -10     
==========================================
- Hits         9040     8996      -44     
  Misses       1883     1883              
- Partials      197      198       +1
Impacted Files Coverage Δ
src/components/shared/IdleSearchField.js 41.86% <33.33%> (+3.22%) ⬆️
src/components/app/Root.js 74.02% <0%> (-0.66%) ⬇️
src/index.js 0% <0%> (ø) ⬆️
src/components/app/ServiceWorkerManager.js

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d03fd3d...781adab. Read the comment docs.

className="idleSearchFieldButton"
onClick={this._onClearButtonClick}
onFocus={this._onClearButtonFocus}
tabIndex={-1}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thinking about it more, I don't think we want to avoid to focus it using the keyboard, so we can remove this tabIndex attribute IMO. The previous behavior was really done for the mouse. What do you think?

@mstange

mstange commented Nov 28, 2018

Copy link
Copy Markdown
Contributor

Could we use -moz-user-focus: ignore here? I think it means that mousedown on the button will not move focus, but I don't know what impact it has on keyboard focusability. If we use that, we won't need to use JS to adjust focus, at least not in Firefox.

I think if you're using the keyboard, there's not much need to focus the button anyway; you can just press Ctrl+A and Backspace if you want to clear the field.

@julienw

julienw commented Nov 28, 2018

Copy link
Copy Markdown
Contributor

I may miss something but this doesn't work for me: http://jsbin.com/jopidicepu/edit?html,css,output

@mstange

mstange commented Nov 28, 2018

Copy link
Copy Markdown
Contributor

Oh, maybe <button> elements are handled specially in such a way that this doesn't work for them. I think when I tried it last, I was trying it on a canvas or on a div.

@brisad

brisad commented Nov 28, 2018

Copy link
Copy Markdown
Contributor Author

I also tried -moz-user-focus: ignore, since the button is actually an <input> element, but it didn't work. But is seems like it is a known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=379939

I agree with @mstange that focusing the button is of limited use when using the keyboard. Tabbing to the clear button and then hitting return or space to clear the text seems a bit unnatural.

So unless anyone disagrees, I'll keep the tabindex.

By the way, if the caret is at the end of the text, one can use Ctrl+U to clear everything in the box directly. It is also a great key combo to use when typing in a password in a terminal when the characters aren't echoed. If you know you typed incorrectly somewhere, you can just hit Ctrl+U and start over :)

@julienw

julienw commented Nov 28, 2018

Copy link
Copy Markdown
Contributor

well, let's keep the tabindex then

@brisad

brisad commented Nov 28, 2018

Copy link
Copy Markdown
Contributor Author

Great, thanks!

@brisad brisad merged commit ce2b8e5 into firefox-devtools:master Dec 4, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants