forms: scroll newly added block into view (#46111)

tests/form_pages/test_block.py

@@ -847,11 +847,13 @@ def test_block_repeated(pub, blocks_feature):
     resp = app.get(formdef.get_url())
     assert resp.text.count('>Test<') == 1
     assert resp.text.count('>hintblock<') == 1
+    assert 'wcs-block-add-clicked' not in resp
     assert 'Add another' in resp
     assert resp.html.find('div', {'class': 'list-add'})
     resp = resp.form.submit('f1$add_element')
     assert resp.text.count('>Test<') == 2
     assert resp.text.count('>hintblock<') == 1
+    assert 'wcs-block-add-clicked' in resp
     resp = resp.form.submit('f1$add_element')
     assert resp.text.count('>Test<') == 3
     assert resp.text.count('>hintblock<') == 1
@@ -873,6 +875,7 @@ def test_block_repeated(pub, blocks_feature):
 
     resp = resp.form.submit('previous')  # -> 2nd page
     resp = resp.form.submit('previous')  # -> 1st page
+    assert 'wcs-block-add-clicked' not in resp
     assert 'readonly' not in resp.form['f1$element0$f123'].attrs
     assert resp.form['f1$element0$f123'].value == 'foo'
 

wcs/blocks.py

@@ -346,3 +346,7 @@ class BlockWidget(WidgetList):
             attrs['aria-describedby'] = 'form_hint_%s' % self.name
         title_tag = htmltag('h4', **attrs)
         return title_tag + htmltext('%s</h4>') % title
+
+    def had_add_clicked(self):
+        add_widget = self.get_widget('add_element')
+        return get_request().form.get(add_widget.name) if add_widget else False

wcs/qommon/static/js/qommon.forms.js

@@ -488,4 +488,9 @@ $(function() {
     }
     return false;
   });
+
+  const $added_sub_widget = $('.wcs-block-add-clicked').find('.BlockSubWidget').last();
+  if ($added_sub_widget.length) {
+    $added_sub_widget[0].scrollIntoView();
+  }
 });

wcs/qommon/templates/qommon/forms/widgets/block.html

@@ -1,3 +1,3 @@
 {% extends "qommon/forms/widget.html" %}
 
-{% block widget-css-classes %}{{ block.super }} {% if widget.remove_button %}wcs-block-with-remove-button{% endif %}{% endblock %}
+{% block widget-css-classes %}{{ block.super }} {% if widget.had_add_clicked %}wcs-block-add-clicked{% endif %} {% if widget.remove_button %}wcs-block-with-remove-button{% endif %}{% endblock %}