Use :focus-within for .form-file focus state

[mdo]

Fixes #26563, closes #26576, closes #29021.

[patrickhlauke]

Note that this change, while it fixes Firefox, now breaks the focus indication in current Edge

[mdo]

Note that this change, while it fixes Firefox, now breaks the focus indication in current Edge

Does that mean we need to have both selectors then?

[patrickhlauke]

Probably yes

[mdo]

With both accounted for, looks good in my quick test. Can anyone confirm?

[MartijnCuppens]

:focus-within ain't supported in Edge & IE so the rule will be ignored. We 'll need to duplicate the block to make this work (same reason we needed to duplicate the blocks of the custom range theming,https://github.com/twbs/bootstrap/blob/master/scss/forms/_form-range.scss)

[patrickhlauke]

:focus-within ain't supported in Edge & IE so the rule will be ignored. We 'll need to duplicate the block to make this work (same reason we needed to duplicate the blocks of the custom range theming,https://github.com/twbs/bootstrap/blob/master/scss/forms/_form-range.scss)

yup, and just checking with Edge there's still no focus indication. and now in IE11 it only shows the caret/cursor in the first part of the control (where the filename is) and no glowing blue outline (which does show in current v4 in IE11).

so yes, this needs to maintain the v4 styles, and then add the :focus-within as a separate replicated block.

[patrickhlauke]

confirming that the file inputs in https://deploy-preview-29036--twbs-bootstrap.netlify.com/docs/4.3/forms/file/ now show the appropriate focus indicator in IE11, Edge, Firefox and Chrome 👍

[ysds]

Looks good!