Scroll to field button action (#10901)

* Scroll To Field WIP

* Scroll to the label

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ScrollTo.svelte

@@ -0,0 +1,50 @@
+<script>
+  import { currentAsset, store } from "builderStore"
+  import { onMount } from "svelte"
+  import { Label, Combobox, Select } from "@budibase/bbui"
+  import {
+    getActionProviderComponents,
+    buildFormSchema,
+  } from "builderStore/dataBinding"
+  import { findComponent } from "builderStore/componentUtils"
+
+  export let parameters
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "top"
+    }
+  })
+
+  $: formComponent = findComponent($currentAsset.props, parameters.componentId)
+  $: formSchema = buildFormSchema(formComponent)
+  $: fieldOptions = Object.keys(formSchema || {})
+  $: actionProviders = getActionProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId,
+    "ScrollTo"
+  )
+</script>
+
+<div class="root">
+  <Label small>Form</Label>
+  <Select
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
+  <Label small>Field</Label>
+  <Combobox bind:value={parameters.field} options={fieldOptions} />
+</div>
+
+<style>
+  .root {
+    display: grid;
+    align-items: center;
+    gap: var(--spacing-m);
+    grid-template-columns: auto;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js

@@ -16,6 +16,7 @@ export { default as S3Upload } from "./S3Upload.svelte"
 export { default as ExportData } from "./ExportData.svelte"
 export { default as ContinueIf } from "./ContinueIf.svelte"
 export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"
+export { default as ScrollTo } from "./ScrollTo.svelte"
 export { default as ShowNotification } from "./ShowNotification.svelte"
 export { default as PromptUser } from "./PromptUser.svelte"
 export { default as OpenSidePanel } from "./OpenSidePanel.svelte"

packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json

@@ -70,6 +70,11 @@
       "type": "form",
       "component": "UpdateFieldValue"
     },
+    {
+      "name": "Scroll To Field",
+      "type": "form",
+      "component": "ScrollTo"
+    },
     {
       "name": "Validate Form",
       "type": "form",

packages/client/manifest.json

@@ -2221,7 +2221,8 @@
       "ValidateForm",
       "ClearForm",
       "ChangeFormStep",
-      "UpdateFieldValue"
+      "UpdateFieldValue",
+      "ScrollTo"
     ],
     "styles": ["size"],
     "size": {

packages/client/src/components/app/forms/InnerForm.svelte

@@ -404,12 +404,20 @@
     }
   }
 
+  const handleScrollToField = ({ field }) => {
+    const fieldId = get(getField(field)).fieldState.fieldId
+    const label = document.querySelector(`label[for="${fieldId}"]`)
+    document.getElementById(fieldId).focus({ preventScroll: true })
+    label.scrollIntoView({ behavior: "smooth" })
+  }
+
   // Action context to pass to children
   const actions = [
     { type: ActionTypes.ValidateForm, callback: formApi.validate },
     { type: ActionTypes.ClearForm, callback: formApi.reset },
     { type: ActionTypes.ChangeFormStep, callback: formApi.changeStep },
     { type: ActionTypes.UpdateFieldValue, callback: handleUpdateFieldValue },
+    { type: ActionTypes.ScrollTo, callback: handleScrollToField },
   ]
 </script>
 

packages/client/src/constants.js

@@ -29,6 +29,7 @@ export const ActionTypes = {
   SetDataProviderSorting: "SetDataProviderSorting",
   ClearForm: "ClearForm",
   ChangeFormStep: "ChangeFormStep",
+  ScrollTo: "ScrollTo",
 }
 
 export const DNDPlaceholderID = "dnd-placeholder"

packages/client/src/utils/buttonActions.js

@@ -153,6 +153,17 @@ const navigationHandler = action => {
   routeStore.actions.navigate(url, peek, externalNewTab)
 }
 
+const scrollHandler = async (action, context) => {
+  return await executeActionHandler(
+    context,
+    action.parameters.componentId,
+    ActionTypes.ScrollTo,
+    {
+      field: action.parameters.field,
+    }
+  )
+}
+
 const queryExecutionHandler = async action => {
   const { datasourceId, queryId, queryParams, notificationOverride } =
     action.parameters
@@ -369,6 +380,7 @@ const handlerMap = {
   ["Duplicate Row"]: duplicateRowHandler,
   ["Delete Row"]: deleteRowHandler,
   ["Navigate To"]: navigationHandler,
+  ["Scroll To Field"]: scrollHandler,
   ["Execute Query"]: queryExecutionHandler,
   ["Trigger Automation"]: triggerAutomationHandler,
   ["Validate Form"]: validateFormHandler,