diff --git a/app/assets/javascripts/fileUpload.js b/app/assets/javascripts/fileUpload.js index 4df2a1702..1ccc724e2 100644 --- a/app/assets/javascripts/fileUpload.js +++ b/app/assets/javascripts/fileUpload.js @@ -3,20 +3,16 @@ Modules.FileUpload = function() { - let $field; + let $form; - this.submit = function() { - - $field.parents('form').trigger('submit'); - - }; + this.submit = () => $form.trigger('submit'); this.start = function(component) { - $field = $('.file-upload-field', component); + $form = $(component); // Need to put the event on the container, not the input for it to work properly - $(component).on('change', '.file-upload-field', this.submit); + $form.on('change', '.file-upload-field', this.submit); }; diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index f19cc9f9c..23cde7b51 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -1,3 +1,5 @@ $(() => GOVUK.modules.start()); $(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input')); + +$(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus')); diff --git a/app/assets/stylesheets/components/file-upload.scss b/app/assets/stylesheets/components/file-upload.scss index d674944a5..96a6b6a3e 100644 --- a/app/assets/stylesheets/components/file-upload.scss +++ b/app/assets/stylesheets/components/file-upload.scss @@ -3,9 +3,15 @@ .file-upload { &-label { + @include bold-19; display: block; margin: 0 0 10px 0; + + .error-message { + padding: 0; + } + } &-field { @@ -33,6 +39,10 @@ padding-left: $gutter-half; } + &-submit { + display: none; + } + } } diff --git a/app/templates/components/file-upload.html b/app/templates/components/file-upload.html index 437ce699f..0d9e65fb9 100644 --- a/app/templates/components/file-upload.html +++ b/app/templates/components/file-upload.html @@ -1,5 +1,5 @@ {% macro file_upload(field, button_text="Choose file") %} -