diff --git a/app/javascript/new_design/user-sign_up.js b/app/javascript/new_design/user-sign_up.js
index ffcc6b96a..de826f3b1 100644
--- a/app/javascript/new_design/user-sign_up.js
+++ b/app/javascript/new_design/user-sign_up.js
@@ -1,30 +1,31 @@
-import { on, show, hide } from '@utils';
+import { delegate, show, hide } from '@utils';
 import { suggest } from 'email-butler';
 
-const user_new_email_selector = '#new_user > #user_email';
-const suspectSuggestionsBox = document.querySelector('.suspect-email');
-const emailSuggestionSpan = document.querySelector(
-  '.suspect-email .question .suggested-email'
-);
+const userNewEmailSelector = '#new_user input#user_email';
+const suggestionsSelector = '.suspect-email';
+const emailSuggestionSelector = '.suspect-email .suggested-email';
 
-on(user_new_email_selector, 'blur', () => {
+delegate('focusout', userNewEmailSelector, () => {
   // When the user leaves the email input during account creation, we check if this account looks correct.
-  // If not (e.g if its "bidou@gmail.coo" or "john@yahoo.rf") we attempt to suggest a fix for the invalid email.
-  const suggestion = suggest(
-    document.querySelector(user_new_email_selector).value
-  );
-  if (suggestion.full) {
-    emailSuggestionSpan.innerHTML = suggestion.full;
-    show(suspectSuggestionsBox);
+  // If not (e.g if its "bidou@gmail.coo" or "john@yahoo.rf"), we attempt to suggest a fix for the invalid email.
+  const userEmailInput = document.querySelector(userNewEmailSelector);
+  const suggestedEmailSpan = document.querySelector(emailSuggestionSelector);
+
+  const suggestion = suggest(userEmailInput.value);
+  if (suggestion && suggestion.full) {
+    suggestedEmailSpan.innerHTML = suggestion.full;
+    show(document.querySelector(suggestionsSelector));
   }
 });
 
 export function acceptEmailSuggestion() {
-  document.querySelector(user_new_email_selector).value =
-    emailSuggestionSpan.innerHTML;
-  hide(suspectSuggestionsBox);
+  const userEmailInput = document.querySelector(userNewEmailSelector);
+  const suggestedEmailSpan = document.querySelector(emailSuggestionSelector);
+
+  userEmailInput.value = suggestedEmailSpan.innerHTML;
+  hide(document.querySelector(suggestionsSelector));
 }
 
 export function discardEmailSuggestionBox() {
-  hide(suspectSuggestionsBox);
+  hide(document.querySelector(suggestionsSelector));
 }
diff --git a/spec/features/users/sign_up_spec.rb b/spec/features/users/sign_up_spec.rb
index 3b89a14fe..6607a289a 100644
--- a/spec/features/users/sign_up_spec.rb
+++ b/spec/features/users/sign_up_spec.rb
@@ -17,25 +17,25 @@ feature 'Signing up:' do
     expect(page).to have_current_path commencer_path(path: procedure.path)
   end
 
-  context 'a new user can sign-up and be suggested a valid email when he makes a typo' do
+  context 'when the user makes a typo in their email address' do
     let(:procedure) { create :simple_procedure, :with_service }
 
     before do
       visit commencer_path(path: procedure.path)
       click_on 'Créer un compte demarches-simplifiees.fr'
       expect(page).to have_selector('.suspect-email', visible: false)
-      fill_in :user_email, with: 'bidou@yahoo.rf'
-      fill_in :user_password, with: '12345'
+      fill_in 'Email', with: 'bidou@yahoo.rf'
+      fill_in 'Mot de passe', with: '12345'
     end
 
-    scenario 'it can accept the suggestion' do
+    scenario 'they can accept the suggestion', js: true do
       expect(page).to have_selector('.suspect-email', visible: true)
       click_on 'Oui'
-      # expect(page).to have_field("Email", :with => 'bidou@yahoo.fr')
+      expect(page).to have_field("Email", :with => 'bidou@yahoo.fr')
       expect(page).to have_selector('.suspect-email', visible: false)
     end
 
-    scenario 'it can discard the suggestion' do
+    scenario 'they can discard the suggestion', js: true do
       expect(page).to have_selector('.suspect-email', visible: true)
       click_on 'Non'
       expect(page).to have_field("Email", :with => 'bidou@yahoo.rf')