improve email validation

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

@@ -115,6 +115,16 @@
     class:is-disabled={disabled}
     class:is-focused={focus}
   >
+    {#if error}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
+
     <input
       {id}
       on:click

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

@@ -8,6 +8,7 @@
   import Icon from "../../Icon/Icon.svelte"
   import StatusLight from "../../StatusLight/StatusLight.svelte"
   import Detail from "../../Typography/Detail.svelte"
+  import Search from "./Search.svelte"
 
   export let primaryLabel = ""
   export let primaryValue = null
@@ -43,17 +44,12 @@
   let searchTerm = null
 
   $: groupTitles = Object.keys(primaryOptions)
-  $: filteredOptions = getFilteredOptions(
-    primaryOptions,
-    searchTerm,
-    getPrimaryOptionLabel
-  )
   let iconData
-  /*
-  $: iconData = primaryOptions?.find(x => {
-    return x.name === primaryFieldText
-  })
-  */
+
+  const updateSearch = e => {
+    dispatch("search", e.detail)
+  }
+
   const updateValue = newValue => {
     if (readonly) {
       return
@@ -107,16 +103,6 @@
       updateValue(event.target.value)
     }
   }
-
-  const getFilteredOptions = (options, term, getLabel) => {
-    if (autocomplete && term) {
-      const lowerCaseTerm = term.toLowerCase()
-      return options.filter(option => {
-        return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
-      })
-    }
-    return options
-  }
 </script>
 
 <div
@@ -183,6 +169,15 @@
       class:auto-width={autoWidth}
       class:is-full-width={!secondaryOptions.length}
     >
+      {#if autocomplete}
+        <Search
+          value={searchTerm}
+          on:change={event => updateSearch(event)}
+          {disabled}
+          placeholder="Search"
+        />
+      {/if}
+
       <ul class="spectrum-Menu" role="listbox">
         {#if placeholderOption}
           <li

packages/bbui/src/Form/PickerDropdown.svelte

@@ -26,6 +26,7 @@
   export let autofocus
   export let primaryOptions = []
   export let secondaryOptions = []
+  export let searchTerm
 
   let primaryLabel
   let secondaryLabel
@@ -87,10 +88,15 @@
     }
     return value
   }
+
+  const updateSearchTerm = e => {
+    searchTerm = e.detail
+  }
 </script>
 
 <Field {label} {labelPosition} {error}>
   <PickerDropdown
+    {searchTerm}
     {autocomplete}
     {dataCy}
     {updateOnChange}
@@ -116,6 +122,7 @@
     {secondaryLabel}
     on:pickprimary={onPickPrimary}
     on:picksecondary={onPickSecondary}
+    on:search={updateSearchTerm}
     on:click
     on:input
     on:blur

packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte

@@ -9,6 +9,7 @@
   } from "@budibase/bbui"
   import { groups, auth } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
+  import { emailValidator } from "helpers/validation"
 
   export let showOnboardingTypeModal
   const password = Math.random().toString(36).substring(2, 22)
@@ -38,6 +39,12 @@
       },
     ]
   }
+
+  function validateInput(email) {
+    if (email) {
+      return emailValidator(email) === true ? null : emailValidator(email)
+    }
+  }
 </script>
 
 <ModalContent
@@ -59,7 +66,7 @@
         bind:inputValue={input.email}
         bind:dropdownValue={input.role}
         options={Constants.BbRoles}
-        error={input.error}
+        error={validateInput(input.email)}
       />
     {/each}
     <div>

packages/builder/src/pages/builder/portal/manage/users/_components/NameTableRenderer.svelte

@@ -17,7 +17,7 @@
     </div>
     {value}
   {:else}
-    <div class="text">Not Available</div>
+    <div class="text">-</div>
   {/if}
 </div>