2.3.1 UI fixes

rdmo/projects/assets/js/interview/actions/interviewActions.js

@@ -13,7 +13,7 @@ import { updateLocation } from '../utils/location'
 import { updateOptions } from '../utils/options'
 import { initPage } from '../utils/page'
 import { copyResolvedConditions, gatherSets, getDescendants, initSets } from '../utils/set'
-import { activateFirstValue, gatherDefaultValues, initValues, compareValues, isEmptyValue } from '../utils/value'
+import { gatherDefaultValues, initValues, compareValues, isEmptyValue } from '../utils/value'
 import { projectId } from '../utils/meta'
 
 import ValueFactory from '../factories/ValueFactory'
@@ -197,8 +197,6 @@ export function fetchValues(page) {
         initSets(sets, page)
         initValues(sets, values, page)
 
-        activateFirstValue(page, values)
-
         dispatch(removeFromPending(pendingId))
         dispatch(resolveConditions(page, sets))
         dispatch(fetchValuesSuccess(values, sets))
@@ -287,6 +285,7 @@ export function storeValue(value) {
       const widget_type = question && question.widget_type
 
       const valueIndex = getState().interview.values.findIndex((v) => compareValues(v, value, widget_type))
+      const valueText = value.text
       const valueFile = value.file
       const valueSuccess = value.success
 
@@ -315,6 +314,12 @@ export function storeValue(value) {
             dispatch(updateValue(value, {success: false}, false))
           }, 1000)
 
+          // replace the text with the old text if it was trimmed by the backend
+          // (but not if a new text was inserted, e.g. by an optionset provider)
+          if (valueText.trim() == value.text) {
+            value.text = valueText
+          }
+
           // check if there is a file or if a filename is set (when the file was just erased)
           if (isNil(valueFile) && isNil(value.file_name)) {
             dispatch(removeFromPending(pendingId))

rdmo/projects/assets/js/interview/components/main/page/Page.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import get from 'lodash/get'
 import { isNil, minBy } from 'lodash'
@@ -25,6 +25,21 @@ const Page = ({ config, settings, templates, overview, page, sets, values, fetch
     currentSet = sets.find((set) => (set.set_prefix == currentSetPrefix && set.set_index == currentSetIndex))
   }
 
+  // whenever the page or the currentSet changes
+  useEffect(() => {
+    // scroll to top
+    window.scrollTo(0, 0)
+
+    // focus the first text or textarea widget
+    const firstWidget = document.querySelector('.interview-widget')
+    if (firstWidget) {
+      const focusInput = firstWidget.querySelector('.text-input input[type="text"], .textarea-input textarea')
+      if (focusInput) {
+        focusInput.focus()
+      }
+    }
+  }, [page.id, currentSet])
+
   const isManager = (overview.is_superuser || overview.is_editor || overview.is_reviewer)
 
   return (

rdmo/projects/assets/js/interview/components/main/page/PageButtons.js

@@ -6,7 +6,7 @@ const PageButtons = ({ page, fetchPage }) => {
     <>
       <div className="interview-buttons">
         <div className="pull-right">
-          <button type="button" onClick={() => fetchPage(page.prev_page)} disabled={!page.prev_page}
+          <button type="button" onClick={() => fetchPage(page.prev_page, true)} disabled={!page.prev_page}
                   className="btn btn-default">
             {gettext('Back')}
           </button>

rdmo/projects/assets/js/interview/utils/value.js

@@ -1,4 +1,4 @@
-import { get, first, isNil, isEmpty, toString, sortBy } from 'lodash'
+import { isNil, isEmpty, toString } from 'lodash'
 
 import ValueFactory from '../factories/ValueFactory'
 
@@ -81,16 +81,6 @@ const initRange = (question, value) => {
   }
 }
 
-const activateFirstValue = (page, values) => {
-  const attribute = get(page, 'questions.0.attribute')
-  if (!isNil(attribute)) {
-    const value = first(sortBy(values.filter((value) => value.attribute == attribute), 'collection_index'))
-    if (!isNil(value)) {
-      value.focus = true
-    }
-  }
-}
-
 const compareValues = (a, b, widget_type = null) => {
   if (isNil(a.id) || isNil(b.id)) {
     if (widget_type === 'checkbox') {
@@ -115,4 +105,4 @@ const isEmptyValue = (value) => {
   )
 }
 
-export { isDefaultValue, gatherDefaultValues, initValues, initRange, activateFirstValue, compareValues, isEmptyValue }
+export { isDefaultValue, gatherDefaultValues, initValues, initRange, compareValues, isEmptyValue }