diff --git a/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte b/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte index f903edfd2b..354995ce7a 100644 --- a/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte @@ -2,7 +2,7 @@ import { flip } from "svelte/animate" import { dndzone } from "svelte-dnd-action" import { Icon, Popover } from "@budibase/bbui" - import { onMount } from "svelte" + import { onMount, tick } from "svelte" import { Constants } from "@budibase/frontend-core" export let constraints @@ -22,13 +22,16 @@ anchors.pop(undefined) } - const addNewInput = () => { - const newOption = `Option ${constraints.inclusion.length + 1}` - options = [...options, { name: newOption, id: Math.random() }] - constraints.inclusion = [...constraints.inclusion, newOption] - optionColors[newOption] = Constants.OptionColours[(options.length - 1) % 9] + const addNewInput = async () => { + const newName = `Option ${constraints.inclusion.length + 1}` + const id = Math.random() + options = [...options, { name: newName, id }] + constraints.inclusion = [...constraints.inclusion, newName] + optionColors[newName] = Constants.OptionColours[(options.length - 1) % 9] colorPopovers.push(undefined) anchors.push(undefined) + await tick() + document.getElementById(`option-${id}`)?.focus() } const handleDndConsider = e => { @@ -75,154 +78,101 @@ -