diff --git a/js/src/helper.js b/js/src/helper.js index 5e594502fe96ff1004c7cff86bddcd83e4556fc2..07664f00d90f30938dc26a45e30cf1c1e130d523 100644 --- a/js/src/helper.js +++ b/js/src/helper.js @@ -25,8 +25,10 @@ const Helper = (() => { } const Event = { - INPUTCHANGE : `change${EVENT_KEY}`, - FORMRESET : `reset${EVENT_KEY}` + INPUTCHANGE : `change${EVENT_KEY}`, + FORMRESET : `reset${EVENT_KEY}`, + INPUTFOCUSIN : `focusin${EVENT_KEY}`, + INPUTFOCUSOUT : `focusout${EVENT_KEY}` } const ClassName = { @@ -41,6 +43,16 @@ const Helper = (() => { } } + function handleFocusin() { + // Needed for keyboard users in firefox + $(this).addClass('focus') + } + + function handleFocusout() { + // Needed for keyboard users in firefox + $(this).removeClass('focus') + } + function handleFormReset() { const $filesControl = $(this).find(`.${ClassName.CUSTOMFILE}`).children(`.${ClassName.CUSTOMFILECONTROL}`) if ($filesControl.length > 0) { @@ -55,7 +67,10 @@ const Helper = (() => { */ $(document).on(Event.INPUTCHANGE, Selector.CUSTOMFILE, handleInputChange) + $(document).on(Event.INPUTFOCUSIN, Selector.CUSTOMFILE, handleFocusin) + $(document).on(Event.INPUTFOCUSOUT, Selector.CUSTOMFILE, handleFocusout) $(document).on(Event.FORMRESET, Selector.FORM, handleFormReset) + })($) export default Helper diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 41dae4d7605ec39ee7f8c1bf4891b73d5fe5fb61..bbca225f73642e30747704ba2545f0c4abfe3c38 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -205,7 +205,8 @@ margin: 0; opacity: 0; - &:focus ~ .custom-file-control { + &:focus ~ .custom-file-control, + &.focus ~ .custom-file-control { box-shadow: $custom-file-focus-box-shadow; } }