Revert focus specific logic in other components and simplify

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -1,8 +1,7 @@
 <script>
   import "@spectrum-css/actionbutton/dist/index-vars.css"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
   const dispatch = createEventDispatcher()
-  const context = getContext("builderFocus")
 
   export let quiet = false
   export let emphasized = false
@@ -14,14 +13,6 @@
   export let size = "M"
   export let active = false
   export let fullWidth = false
-  export let autofocus = false
-
-  let focus = false
-  let actionButton
-  $: focus = autofocus && actionButton !== undefined
-  $: if (focus) {
-    actionButton.focus()
-  }
 
   function longPress(element) {
     if (!longPressable) return
@@ -46,7 +37,6 @@
 
 <button
   data-cy={dataCy}
-  bind:this={actionButton}
   use:longPress
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}
@@ -54,17 +44,9 @@
   class:fullWidth
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   class:active
-  class:is-focused={focus}
   {disabled}
   on:longPress
   on:click|preventDefault
-  on:focus={() => {
-    focus = true
-  }}
-  on:blur={() => {
-    focus = false
-    if (context) context.clear()
-  }}
 >
   {#if longPressable}
     <svg
@@ -98,10 +80,4 @@
   .active svg {
     color: var(--spectrum-global-color-blue-600);
   }
-  button.is-focused {
-    border-color: var(
-      --spectrum-textfield-m-border-color-down,
-      var(--spectrum-alias-border-color-mouse-focus)
-    );
-  }
 </style>

packages/bbui/src/Form/Combobox.svelte

@@ -13,7 +13,6 @@
   export let options = []
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -36,7 +35,6 @@
     {options}
     {placeholder}
     {readonly}
-    {autofocus}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}

packages/bbui/src/Form/Core/Combobox.svelte

@@ -3,29 +3,21 @@
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let value = null
   export let id = null
   export let placeholder = "Choose an option or type"
   export let disabled = false
   export let readonly = false
-  export let autofocus = false
   export let error = null
   export let options = []
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
 
-  const context = getContext("builderFocus")
   const dispatch = createEventDispatcher()
   let open = false
   let focus = false
-  let comboInput
-
-  $: focus = autofocus && comboInput !== undefined
-  $: if (focus) {
-    comboInput.focus()
-  }
 
   const selectOption = value => {
     dispatch("change", value)
@@ -57,16 +49,10 @@
     class:is-focused={open || focus}
   >
     <input
-      bind:this={comboInput}
       {id}
       type="text"
-      on:focus={() => {
+      on:focus={() => (focus = true)}
-        focus = true
+      on:blur={() => (focus = false)}
-      }}
-      on:blur={() => {
-        focus = false
-        context.clear()
-      }}
       on:change={onType}
       value={value || ""}
       placeholder={placeholder || ""}

packages/bbui/src/Form/Core/Multiselect.svelte

@@ -13,7 +13,6 @@
   export let readonly = false
   export let autocomplete = false
   export let sort = false
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   $: selectedLookupMap = getSelectedLookupMap(value)
@@ -86,5 +85,4 @@
   {getOptionValue}
   onSelectOption={toggleOption}
   {sort}
-  {autofocus}
 />

packages/bbui/src/Form/Core/Picker.svelte

@@ -3,7 +3,7 @@
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
   import { fly } from "svelte/transition"
-  import { createEventDispatcher, getContext } from "svelte"
+  import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
 
@@ -26,18 +26,9 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
-  export let autofocus = false
 
-  const context = getContext("builderFocus")
   const dispatch = createEventDispatcher()
   let searchTerm = null
-  let focus = false
-  let pickerButton
-
-  $: focus = autofocus && pickerButton !== undefined
-  $: if (focus) {
-    pickerButton.focus()
-  }
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -89,24 +80,7 @@
     class:is-invalid={!!error}
     class:is-open={open}
     aria-haspopup="listbox"
-    class:is-focused={focus}
-    bind:this={pickerButton}
     on:mousedown={onClick}
-    on:keydown={e => {
-      var keycode = e.key
-      if (focus) {
-        if (keycode === "Enter") {
-          onClick(e)
-        }
-      }
-    }}
-    on:focus={() => {
-      focus = true
-    }}
-    on:blur={() => {
-      focus = false
-      if (context) context.clear()
-    }}
   >
     {#if fieldIcon}
       <span class="icon-Placeholder-Padding">

packages/bbui/src/Form/Core/Select.svelte

@@ -16,7 +16,6 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -75,7 +74,6 @@
   {fieldIcon}
   {autocomplete}
   {sort}
-  {autofocus}
   isPlaceholder={value == null || value === ""}
   placeholderOption={placeholder}
   isOptionSelected={option => option === value}

packages/bbui/src/Form/Multiselect.svelte

@@ -14,7 +14,6 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let sort = false
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -36,6 +35,5 @@
     {getOptionValue}
     on:change={onChange}
     on:click
-    {autofocus}
   />
 </Field>

packages/bbui/src/Form/Select.svelte

@@ -18,7 +18,6 @@
   export let autoWidth = false
   export let sort = false
   export let tooltip = ""
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -45,7 +44,6 @@
     {placeholder}
     {autoWidth}
     {sort}
-    {autofocus}
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}

packages/builder/src/builderStore/store/frontend.js

@@ -20,7 +20,6 @@ import analytics, { Events } from "analytics"
 import {
   findComponentType,
   findComponentParent,
-  findComponentPath,
   findClosestMatchingComponent,
   findAllMatchingComponents,
   findComponent,
@@ -423,21 +422,6 @@ export const getFrontendStore = () => {
         store.update(state => {
           state.currentView = "component"
           state.selectedComponentId = componentInstance._id
-
-          const focusSetting = resolveComponentFocus(
-            asset?.props,
-            componentInstance
-          )
-          if (focusSetting) {
-            state.builderFocus = [
-              {
-                key: focusSetting.key,
-                target: state.selectedComponentId,
-                location: "component_settings",
-              },
-            ]
-          }
-
           return state
         })
 
@@ -680,32 +664,5 @@ export const getFrontendStore = () => {
     },
   }
 
-  // Determine the initial focus for newly created components
-  // Take into account the fact that data providers should be
-  // skipped if they will be inherited from the path
-  const resolveComponentFocus = (asset_props, componentInstance) => {
-    const definition = store.actions.components.getDefinition(
-      componentInstance._component
-    )
-    let providerIdx = -1
-    let required = definition.settings.filter((s, idx) => {
-      if (s.type === "dataProvider") {
-        providerIdx = idx
-      }
-      return s.required
-    })
-
-    if (providerIdx > -1) {
-      const path = findComponentPath(asset_props, componentInstance._id)
-      const providers = path.filter(c =>
-        c._component?.endsWith("/dataprovider")
-      )
-      if (providers.length) {
-        required = required.splice(providerIdx, 1)
-      }
-    }
-    return required[0]
-  }
-
   return store
 }

packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte

@@ -18,7 +18,6 @@
   export let options
   export let allowJS = true
   export let appendBindingsAsOptions = true
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
@@ -62,7 +61,6 @@
     on:pick={e => onChange(e.detail, true)}
     {placeholder}
     options={allOptions}
-    {autofocus}
   />
   {#if !disabled}
     <div

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -68,7 +68,7 @@
     customTheme: $store.customTheme,
     previewDevice: $store.previewDevice,
     messagePassing: $store.clientFeatures.messagePassing,
-    isBudibaseEvent: true
+    isBudibaseEvent: true,
   }
   $: json = JSON.stringify(previewData)
 
@@ -148,21 +148,6 @@
     }
   })
 
-  const resolveFocus = (data) => {
-    if($store.builderFocus){
-      const comp = $store.builderFocus.reduce((acc, item)=>{
-      acc = item.target
-        return acc
-      }, "")
-      if(data.id !== comp){
-          store.update(state => {
-          delete state.builderFocus
-          return state
-        })
-      }
-    }
-  }
-
   const handleBudibaseEvent = async event => {
     const { type, data } = event.data || event.detail
     if (!type) {
@@ -172,7 +157,6 @@
     try {
       if (type === "select-component" && data.id) {
         store.actions.components.select({ _id: data.id })
-        resolveFocus(data)
       } else if (type === "update-prop") {
         await store.actions.components.updateProp(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
@@ -206,12 +190,8 @@
           store.actions.components.copy(source, true)
           await store.actions.components.paste(destination, data.mode)
         }
-      } else if(type == "builder-focus")  {
+      } else if (type === "highlight-setting") {
-        store.update(state => ({
+        console.log(data.setting)
-          ...state,
-          builderFocus : 
-          [...data]
-        }))
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -73,15 +73,6 @@
 
     return true
   }
-
-  const isFocused = setting => {
-    if (!$store.builderFocus) {
-      return false
-    }
-    return (
-      setting.required === true && $store.builderFocus[0].key === setting.key
-    )
-  }
 </script>
 
 {#each sections as section, idx (section.name)}
@@ -116,7 +107,6 @@
           {componentBindings}
           {componentInstance}
           {componentDefinition}
-          autofocus={isFocused(setting)}
         />
       {/if}
     {/each}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte

@@ -6,7 +6,6 @@
   import { createEventDispatcher, onMount } from "svelte"
 
   export let value
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
@@ -25,7 +24,6 @@
 
 <Select
   {value}
-  {autofocus}
   placeholder={null}
   on:change
   options={providers}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -25,7 +25,6 @@
   export let otherSources
   export let showAllQueries
   export let bindings = []
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   const arrayTypes = ["attachment", "array"]
@@ -159,7 +158,6 @@
     value={text}
     options={[text]}
     on:click={dropdownRight.show}
-    {autofocus}
   />
   {#if value?.type === "query"}
     <i class="ri-settings-5-line" on:click={openQueryParamsDrawer} />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte

@@ -10,7 +10,6 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let autofocus = false
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@@ -38,10 +37,4 @@
   }
 </script>
 
-<Select
+<Select {placeholder} value={boundValue} on:change={onChange} {options} />
-  {placeholder}
-  value={boundValue}
-  on:change={onChange}
-  {options}
-  {autofocus}
-/>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte

@@ -10,7 +10,6 @@
   export let componentInstance
   export let value
   export let type
-  export let autofocus = false
 
   $: form = findClosestMatchingComponent(
     $currentAsset?.props,
@@ -41,4 +40,4 @@
   }
 </script>
 
-<Combobox on:change {value} {options} {autofocus} />
+<Combobox on:change {value} {options} />

packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte

@@ -15,7 +15,6 @@
 
   export let value = ""
   export let maxIconsPerPage = 30
-  export let autofocus = false
 
   let searchTerm = ""
   let selectedLetter = "A"
@@ -118,7 +117,7 @@
 </script>
 
 <div bind:this={buttonAnchor}>
-  <ActionButton on:click={dropdown.show} {autofocus}>
+  <ActionButton on:click={dropdown.show}>
     {displayValue}
   </ActionButton>
 </div>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte

@@ -10,7 +10,6 @@
   export let componentInstance = {}
   export let value = ""
   export let placeholder
-  export let autofocus
 
   const dispatch = createEventDispatcher()
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@@ -32,10 +31,4 @@
   }
 </script>
 
-<Multiselect
+<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
-  {placeholder}
-  value={boundValue}
-  on:change={setValue}
-  {options}
-  {autofocus}
-/>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -4,8 +4,6 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-  import { setContext } from "svelte"
-  import { store } from "builderStore"
 
   export let label = ""
   export let componentInstance = {}
@@ -18,7 +16,6 @@
   export let bindings = []
   export let componentBindings = []
   export let nested = false
-  export let autofocus = false
 
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
   $: safeValue = getSafeValue(value, props.defaultValue, allBindings)
@@ -63,28 +60,6 @@
       ? defaultValue
       : enriched
   }
-
-  setContext("builderFocus", {
-    clear: () => {
-      if (!$store?.builderFocus) {
-        return
-      }
-      store.update(state => {
-        const updatedFocus = $store?.builderFocus?.filter(focus => {
-          return (
-            focus.location === "component_settings" &&
-            focus.target !== componentInstance._id
-          )
-        })
-        if (updatedFocus?.length > 0) {
-          state.builderFocus = updatedFocus
-        } else {
-          delete state.builderFocus
-        }
-        return state
-      })
-    },
-  })
 </script>
 
 <div class="property-control" data-cy={`setting-${key}`}>
@@ -107,7 +82,6 @@
       {key}
       {type}
       {...props}
-      {autofocus}
     />
   </div>
 </div>
@@ -119,6 +93,13 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    padding: 4px 8px;
+    margin: -6px -10px;
+    border: 2px solid transparent;
+    border-radius: 4px;
+  }
+  .property-control.highlighted {
+    border-color: var(--spectrum-global-color-blue-400);
   }
   .label {
     padding-bottom: var(--spectrum-global-dimension-size-65);

packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte

@@ -4,7 +4,6 @@
 
   export let value
   export let bindings
-  export let autofocus
 
   $: urlOptions = $store.screens
     .map(screen => screen.routing?.route)
@@ -17,5 +16,4 @@
   on:change
   options={urlOptions}
   appendBindingsAsOptions={false}
-  {autofocus}
 />

packages/client/manifest.json

@@ -1167,7 +1167,8 @@
       {
         "type": "boolean",
         "label": "New Tab",
-        "key": "openInNewTab"
+        "key": "openInNewTab",
+        "required": true
       },
       {
         "type": "select",
@@ -1176,6 +1177,7 @@
         "defaultValue": "M",
         "showInBar": true,
         "barStyle": "picker",
+        "required": true,
         "options": [
           {
             "label": "Small",
@@ -1196,7 +1198,8 @@
         "label": "Color",
         "key": "color",
         "showInBar": true,
-        "barSeparator": false
+        "barSeparator": false,
+        "required": true
       },
       {
         "type": "boolean",
@@ -1205,7 +1208,8 @@
         "showInBar": true,
         "barIcon": "TagBold",
         "barTitle": "Bold text",
-        "barSeparator": false
+        "barSeparator": false,
+        "required": true
       },
       {
         "type": "boolean",
@@ -1214,7 +1218,8 @@
         "showInBar": true,
         "barIcon": "TagItalic",
         "barTitle": "Italic text",
-        "barSeparator": false
+        "barSeparator": false,
+        "required": true
       },
       {
         "type": "boolean",

packages/client/src/components/app/ComponentPlaceholder.svelte

@@ -5,26 +5,20 @@
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
-  $: focusSetting = $component.missingRequiredSettings?.[0]
+  $: requiredSetting = $component.missingRequiredSettings?.[0]
 </script>
 
-{#if $builderStore.inBuilder && focusSetting}
+{#if $builderStore.inBuilder && requiredSetting}
   <div use:styleable={$component.styles}>
     <div class="component-placeholder">
       <span>
-        Add the <mark>{focusSetting?.label}</mark> setting to start using your component
+        Add the <mark>{requiredSetting.label}</mark> setting to start using your
-        &nbsp;
+        component &nbsp;
       </span>
       <span
         class="spectrum-Link"
         on:click={() => {
-          builderStore.actions.setFocus([
+          builderStore.actions.highlightSetting(requiredSetting.key)
-            {
-              location: "component_settings",
-              key: focusSetting.key,
-              target: $component.id,
-            },
-          ])
         }}
       >
         Show me

packages/client/src/components/app/Link.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getContext } from "svelte"
-  import Placeholder from "./Placeholder.svelte"
 
   const { linkable, styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -80,11 +79,7 @@
     {componentText}
   </div>
 {:else if $builderStore.inBuilder || componentText}
-  {#if !url && !text}
+  {#if externalLink || openInNewTab}
-    <div use:styleable={{ ...$component.styles, empty: true }}>
-      <Placeholder />
-    </div>
-  {:else if externalLink || openInNewTab}
     <a
       {target}
       href={sanitizedUrl}

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

@@ -76,9 +76,7 @@
       {#if !formContext}
         <Placeholder text="Form components need to be wrapped in a form" />
       {:else if !fieldState}
-        {#if $builderStore.inBuilder}
         <Placeholder />
-        {/if}
       {:else if schemaType && schemaType !== type && type !== "options"}
         <Placeholder
           text="This Field setting is the wrong data type for this component"

packages/client/src/stores/builder.js

@@ -76,8 +76,8 @@ const createBuilderStore = () => {
       }
       store.update(state => ({ ...state, editMode: enabled }))
     },
-    setFocus: data => {
+    highlightSetting: setting => {
-      window.parent.postMessage({ type: "builder-focus", data })
+      dispatchEvent("highlight-setting", { setting })
     },
   }
   return {