fix(scroll): use scroll-to-input-offset value if available (#1185)

The previous functionality was returning zero if the
`scroll-to-input-offset` attribute was missing, otherwise it was
returning the default value (120). There was no path which returned the
value of `scroll-to-input-offset` if available.

- Created a new demo "Scroll to Input Offset"
- Corrected the value return
- Fixed a few typos in the demo and documentation

| Before | After |
| -- | -- |
|
![before](https://github.com/user-attachments/assets/1bcf806c-4b20-4bcf-b95e-4d904dc78dac)
|
![after](https://github.com/user-attachments/assets/a49278dc-138e-4da2-8b28-a150b7baa999)
|


[Asana](https://app.asana.com/1/47184964732898/project/1204008699308084/task/1210525849054931?focus=true)

Author: hgray-instawork

demo/backend/advanced/case-studies/scroll-to-input/_styles.xml.njk

@@ -0,0 +1,54 @@
+<style
+  id="form-group"
+  flex="1"
+  marginLeft="24"
+  marginRight="24"
+  marginTop="24"
+/>
+<style
+  id="input"
+  borderBottomColor="#E1E1E1"
+  borderBottomWidth="1"
+  borderColor="#4E4D4D"
+  flex="1"
+  fontSize="16"
+  fontWeight="normal"
+  paddingBottom="8"
+  paddingTop="8"
+>
+  <modifier focused="true">
+  <style borderBottomColor="#4778FF" />
+  </modifier>
+</style>
+<style id="input-error" borderBottomColor="#FF4847" color="#FF4847">
+  <modifier focused="true">
+  <style borderBottomColor="#FF4847" />
+  </modifier>
+</style>
+<style
+  id="label"
+  borderColor="#4E4D4D"
+  fontSize="16"
+  fontWeight="bold"
+  lineHeight="24"
+  marginBottom="8"
+/>
+<style
+  id="help"
+  borderColor="#FF4847"
+  fontSize="16"
+  fontWeight="normal"
+  lineHeight="24"
+  marginTop="16"
+/>
+<style id="help-error" color="#FF4847" />
+<style
+  id="submit"
+  color="#4778FF"
+  fontSize="16"
+  fontWeight="bold"
+  lineHeight="24"
+  marginLeft="24"
+  marginTop="16"
+/>
+<style id="spacer" height="200" />

demo/backend/advanced/case-studies/scroll-to-input/index.xml.njk

@@ -0,0 +1,44 @@
+---
+permalink: "/advanced/case-studies/scroll-to-input/index.xml"
+tags: "Advanced/Case Studies"
+hv_title: "Scroll to Input Offset"
+hv_button_behavior: "back"
+---
+{% extends 'templates/base.xml.njk' %}
+{% from 'macros/description/index.xml.njk' import description %}
+
+{% block styles %}
+  {% include './_styles.xml.njk' %}
+{% endblock %}
+
+{% block container %}
+  <form id="myScrollForm" scroll="true" scroll-to-input-offset="450">
+    {{ description('Scroll to input offset is a property that can be used to scroll to an input field when it is focused.') }}
+    <view style="spacer" />
+    <view style="spacer" />
+    <view style="form-group">
+      <text style="label">Label line</text>
+      <text-field
+        name="data"
+        placeholder="Placeholder"
+        placeholderTextColor="#8D9494"
+        style="input"
+      />
+    </view>
+    <text
+      action="replace"
+      href="/hyperview/public/advanced/case-studies/scroll-to-input/submit.xml"
+      show-during-load="mySpinner"
+      style="submit"
+      target="myScrollForm"
+    >
+      Submit
+    </text>
+    <view style="spacer" />
+    <view style="spacer" />
+    <view style="spacer" />
+    <view style="spacer" />
+    {{ description('Bottom of the form') }}
+  </form>
+  <spinner id="mySpinner" hide="true" />
+{% endblock %}

demo/backend/advanced/case-studies/scroll-to-input/submit.xml

@@ -0,0 +1,18 @@
+<form
+  id="myScrollForm"
+  scroll="true"
+  xmlns="https://hyperview.org/hyperview"
+  scroll-to-input-offset="512"
+>
+  <view style="form-group">
+    <text style="label">Label line</text>
+    <text-field
+      name="data"
+      placeholder="Placeholder"
+      placeholderTextColor="#8D9494"
+      style="input"
+      value=""
+    />
+  </view>
+  <text style="submit">Saved!</text>
+</form>

demo/backend/ui/ui-elements/forms/text-field/index.xml.njk

@@ -23,6 +23,6 @@ hv_button_behavior: "back"
 {% endblock %}
 
 {% block content %}
-  {{ about('Text field are used in forms to collect textual data') }}
+  {{ about('Text fields are used in forms to collect textual data') }}
   {% include './_form.xml.njk' %}
 {% endblock %}

docs/reference_view.md

@@ -111,9 +111,9 @@ An attribute indicating the direction in which the view will scroll.
 
 #### `scroll-to-input-offset`
 
-| Type   | Required                |
-| ------ | ----------------------- |
-| number | No (defauls to **120**) |
+| Type   | Required                 |
+| ------ | ------------------------ |
+| number | No (defaults to **120**) |
 
 An attribute defining an additional scroll offset to be applied to the view, when a `<text-field>` is focused. Only valid in combination with attribute `scroll` set to `"true"`.
 

schema/core.xsd

@@ -456,6 +456,7 @@
     <xs:attribute name="safe-area" type="xs:boolean" />
     <xs:attribute name="value" type="xs:string" />
     <xs:attribute name="sticky" type="xs:boolean" />
+    <xs:attribute name="scroll-to-input-offset" type="xs:nonNegativeInteger" />
     <xs:attributeGroup ref="hv:behaviorAttributes" />
     <xs:attributeGroup ref="hv:scrollAttributes" />
   </xs:attributeGroup>

src/components/hv-view/index.tsx

@@ -137,7 +137,7 @@ export default class HvView extends PureComponent<HvComponentProps> {
     const offsetStr = this.attributes[ATTRIBUTES.SCROLL_TO_INPUT_OFFSET];
     if (offsetStr) {
       const offset = parseInt(offsetStr, 10);
-      return Number.isNaN(offset) ? 0 : defaultOffset;
+      return Number.isNaN(offset) ? defaultOffset : offset;
     }
     return defaultOffset;
   };