Skip to content

Fix focus on custom-file input in Firefox#26576

Closed
alecpl wants to merge 4 commits intotwbs:masterfrom
alecpl:firefox-file-input-focus-fix
Closed

Fix focus on custom-file input in Firefox#26576
alecpl wants to merge 4 commits intotwbs:masterfrom
alecpl:firefox-file-input-focus-fix

Conversation

@alecpl
Copy link
Copy Markdown
Contributor

@alecpl alecpl commented May 24, 2018

Fixes #26563.

@alecpl
Copy link
Copy Markdown
Contributor Author

alecpl commented May 24, 2018

I noticed that there are two more issues:

  1. Similar hack might be needed for form validation classes
  2. $enable-shadows is ignored on custom-file input focus
    Feel free to take over the PR to fix these.

@ysds
Copy link
Copy Markdown
Contributor

ysds commented May 24, 2018

I know it is an edge case, but :focus-within causes double focus ring if .custom-file contains other focusable elements.

image

https://codepen.io/anon/pen/GdaGeL

@alecpl
Copy link
Copy Markdown
Contributor Author

alecpl commented May 25, 2018

@ysds, a valid one, I didn't find solution for this case.

@mdo
Copy link
Copy Markdown
Member

mdo commented Jul 15, 2018

Similar hack might be needed for form validation classes

Yup, we definitely need this, too.

@XhmikosR

This comment has been minimized.

@alecpl

This comment has been minimized.

@XhmikosR

This comment has been minimized.

@mdo mdo changed the base branch from v4-dev to master March 13, 2019 17:42
@MartijnCuppens
Copy link
Copy Markdown
Member

Closing this since this PR introduces the behaviour @ysds mentions above

@marveloo
Copy link
Copy Markdown

marveloo commented Jun 29, 2019

The idea of using :focus-within instead of :focus for firefox was good (and it still is) but it looks like it was forgotten that :focus-within also works on the element itself and not only on its children. Since HTML inputs never have children, both pseudo-classes can be used interchangeably on file inputs. So instead of referencing .custom-file's children:

.custom-file:focus-within > .custom-file-label

We can reference the .custom-file-input itself and then use ~:

.custom-file-input:focus-within ~ .custom-file-label

@MartijnCuppens
Copy link
Copy Markdown
Member

@marveloo, feel free to open a new PR for your solution.

@mdo mdo reopened this Jul 13, 2019
@mdo mdo closed this Jul 13, 2019
mdo added a commit that referenced this pull request Jul 13, 2019
XhmikosR pushed a commit that referenced this pull request Jul 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Custom file input has no focus indication in Firefox

7 participants