Fix Dropdown and forms (#296)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/presentation/src/components/UserBox.svelte

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
+
 <script lang="ts">
   import { onMount } from 'svelte'
   import type { IntlString } from '@anticrm/platform'
@@ -34,6 +35,7 @@
   let selected: Person | undefined
   let btn: HTMLElement
   let container: HTMLElement
+  let opened: boolean = false
 
   const client = getClient()
 
@@ -54,11 +56,13 @@
 <div class="flex-row-center container" bind:this={container}
   on:click|preventDefault={() => {
     btn.focus()
-    showPopup(UsersPopup, { _class, title, caption }, container, (result) => {
+    if (!opened) {
-      if (result) {
+      opened = true
-        value = result._id
+      showPopup(UsersPopup, { _class, title, caption }, container, (result) => {
-      }
+        if (result) { value = result._id }
-    })
+        opened = false
+      })
+    }
   }}
 >
   <button class="focused-button btn" class:selected bind:this={btn}>

packages/theme/styles/_layouts.scss

@@ -40,6 +40,7 @@ button {
   border: 1px solid transparent;
   outline: none;
   cursor: pointer;
+  user-select: none;
 }
 input {
   font: inherit;
@@ -266,7 +267,7 @@ a.no-line {
   background-color: var(--theme-button-bg-focused);
   border: 1px solid transparent;
 
-  & > .icon { opacity: .3; }
+  & > .icon { color: var(--theme-content-trans-color); }
   &.selected {
     background-color: var(--theme-button-bg-focused);
     border: 1px solid var(--theme-bg-accent-color);
@@ -274,12 +275,12 @@ a.no-line {
   &:hover {
     background-color: var(--theme-button-bg-pressed);
     border: 1px solid var(--theme-bg-accent-color);
-    & > .icon { opacity: 1; }
+    & > .icon { color: var(--theme-caption-color); }
   }
   &:focus {
     border: 1px solid var(--primary-button-focused-border);
     box-shadow: 0 0 0 3px var(--primary-button-outline);
-    & > .icon { opacity: 1; }
+    & > .icon { color: var(--theme-caption-color); }
   }
 }
 

packages/ui/src/components/Dropdown.svelte

@@ -36,6 +36,7 @@
 
   let btn: HTMLElement
   let container: HTMLElement
+  let opened: boolean = false
 
   onMount(() => {
     if (btn && show) {
@@ -48,12 +49,16 @@
 <div class="flex-row-center container" bind:this={container}
   on:click|preventDefault={() => {
     btn.focus()
-    showPopup(DropdownPopup, { title: label, caption: 'suggested', items }, container, (result) => {
+    if (!opened) {
-      if (result) selected = result
+      opened = true
-    })
+      showPopup(DropdownPopup, { title: label, caption: 'suggested', items }, container, (result) => {
+        if (result) selected = result
+        opened = false
+      })
+    }
   }}
 >
-  <button class="btn" class:selected bind:this={btn}>
+  <div class="flex-center focused-button btn" class:selected bind:this={btn} tabindex={0} on:focus={() => container.click()}>
     {#if selected}
       <img src={selected.item} alt={selected.label} />
     {:else}
@@ -63,7 +68,7 @@
         <svelte:component this={icon} size={'small'} />
       {/if}
     {/if}
-  </button>
+  </div>
 
   <div class="selectUser">
     <div class="title"><Label {label} /></div>
@@ -83,6 +88,7 @@
     background-color: transparent;
     border: 1px solid var(--theme-card-divider);
     border-radius: .5rem;
+    outline: none;
     overflow: hidden;
   }
   .selected {

packages/ui/src/components/PopupInstance.svelte

@@ -84,10 +84,13 @@
     }
   }
 
+  function handleKeydown (ev: KeyboardEvent) {
+    if (ev.key === 'Escape' && is) escapeClose()
+  }
   afterUpdate(() => fitPopup())
 </script>
 
-<svelte:window on:resize={fitPopup} />
+<svelte:window on:resize={fitPopup} on:keydown={handleKeydown} />
 <div class="popup" bind:this={modalHTML} style={`z-index: ${zIndex + 1};`}>
   <svelte:component bind:this={componentInstance} this={is} {...props} on:update={fitPopup} on:close={ (ev) => close(ev.detail) } />
 </div>

plugins/recruit-resources/src/components/CreateCandidates.svelte

@@ -27,6 +27,10 @@
   let name: string = ''
   let description: string = ''
 
+  export function canClose(): boolean {
+    return name === ''
+  }
+
   const client = getClient()
 
   function createCandidates() {
@@ -47,7 +51,6 @@
 >
   <Grid column={1} rowGap={1.5}>
     <EditBox label={recruit.string.CandidatesName} icon={IconFolder} bind:value={name} placeholder={'Talent Pool'} focus/>
-    <!-- <TextArea label={recruit.string.CandidatesDescription} bind:value={description}/> -->
     <ToggleWithLabel label={recruit.string.MakePrivate} description={recruit.string.MakePrivateDescription}/>
   </Grid>
 </SpaceCreateCard>

plugins/recruit-resources/src/components/CreateVacancy.svelte

@@ -30,6 +30,10 @@
   let name: string = ''
   let description: string = ''
 
+  export function canClose(): boolean {
+    return name === ''
+  }
+
   const client = getClient()
 
   const colors = [