diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte index e02f9d87e5..0671dce589 100644 --- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte @@ -5,6 +5,7 @@ import { Input, Select, ModalContent, Toggle } from "@budibase/bbui" import getTemplates from "builderStore/store/screenTemplates" import analytics, { Events } from "analytics" + import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" const CONTAINER = "@budibase/standard-components/container" @@ -84,7 +85,7 @@ if (!event.detail.startsWith("/")) { route = "/" + event.detail } - route = route.replace(/ +/g, "-") + route = sanitizeUrl(route) } diff --git a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte index d782d1cd44..efe51ebdac 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte @@ -7,6 +7,7 @@ import RoleSelect from "./PropertyControls/RoleSelect.svelte" import { currentAsset, store } from "builderStore" import { FrontendTypes } from "constants" + import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" export let componentInstance export let bindings @@ -37,7 +38,12 @@ key: "routing.route", label: "Route", control: Input, - parser: val => val.replace(/ +/g, "-"), + parser: val => { + if (!val.startsWith("/")) { + val = "/" + val + } + return sanitizeUrl(val) + }, }, { key: "routing.roleId", label: "Access", control: RoleSelect }, { key: "layoutId", label: "Layout", control: LayoutSelect },