Merge branch 'develop' into feature/multiple-selection

app/assets/javascripts/views/challenge_modal/challenge_modal.tsx

@@ -374,24 +374,26 @@ function ChallengePrompts({
         </div>
       ) : (
         <div key={prompt.id} className="sk-panel-row">
-          <input
+          <form className="w-full">
-            className="sk-input contrast"
+            <input
-            value={ctrl.state.values[prompt.id]!.value as string | number}
+              className="sk-input contrast"
-            onChange={(event) => {
+              value={ctrl.state.values[prompt.id]!.value as string | number}
-              const value = (event.target as HTMLInputElement).value;
+              onChange={(event) => {
-              ctrl.state.values[prompt.id]!.value = value;
+                const value = (event.target as HTMLInputElement).value;
-              ctrl.onTextValueChange(prompt);
+                ctrl.state.values[prompt.id]!.value = value;
-            }}
+                ctrl.onTextValueChange(prompt);
-            onKeyUp={(event) => {
+              }}
-              if (event.key === 'Enter') {
+              onKeyUp={(event) => {
-                event.preventDefault();
+                if (event.key === 'Enter') {
-                ctrl.submit();
+                  event.preventDefault();
-              }
+                  ctrl.submit();
-            }}
+                }
-            ref={index === 0 ? initialFocusRef : undefined}
+              }}
-            placeholder={prompt.title}
+              ref={index === 0 ? initialFocusRef : undefined}
-            type={prompt.secureTextEntry ? 'password' : 'text'}
+              placeholder={prompt.title}
-          />
+              type={prompt.secureTextEntry ? 'password' : 'text'}
+            />
+          </form>
         </div>
       )}