Merge pull request #408 from CirclesUBI/feature/app-473-make-type-box…

…-for-name-search-always-on-top

APP-473 - Fix search results always scroll bottom

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.2.cjs

package.json

@@ -34,5 +34,5 @@
     "xstate": "^4.33.6"
   },
   "version": "8.0.1",
-  "packageManager": "[email protected].1"
+  "packageManager": "[email protected].2"
 }

packages/o-editors/src/DropdownSelectEditor.svelte

@@ -159,19 +159,15 @@ function toggleInputView() {
         </div>
       {:else}
         <Select
-          name="searchTerm"
-          autoComplete="off"
           isFocused="{false}"
           selectedValue="{selected}"
           loadOptions="{(searchString) => context.params.choices.find(searchString, context)}"
           noOptionsMessage=""
           placeholder="Search..."
           listAutoWidth="{false}"
-          getHighlight="{context.params.getHighlight}"
           inlineSubmit="{context.params.showNavigation === undefined ? true : context.params.showNavigation}"
           isCreatable="{false}"
           listPlacement="top"
-          scrollContainer="{document.getElementById('modalScrollable')}"
           containerClasses="min-w-full asyncList  max-w-xs"
           on:clear="{handleClear}"
           optionIdentifier="{context.params.keyProperty}"

packages/o-editors/src/dropdownItems/DropDownProfile.svelte

@@ -1,44 +1,52 @@
 <script>
 import UserImage from "@o-platform/shell/src/shared/atoms/UserImage.svelte";
+import { onMount } from "svelte";
 export let item = undefined;
 export const itemType = "profile";
 export let isFirst = false;
 export let isHover = false;
 
+export let isActive = false;
+
 let itemClasses = "";
 
-$: {
+onMount(() => {
   let classes = [];
 
   classes.push("border-light-lightest");
+
+  if (isActive) {
+    classes.push("active");
+  }
   if (isFirst) {
     classes.push("first");
   }
   if (isHover) {
     classes.push("hover");
   }
   itemClasses = classes.join(" ");
-}
-console.log("ITEM", item);
+});
 </script>
 
-<section class="flex mb-4 mr-1 items-center justify-center border rounded-lg shadow-sm customItem {itemClasses}">
-  <div class="flex items-center w-full px-3 pt-1 space-x-2 sm:space-x-6 item-body">
-    <div class="text-center">
-      <div class="inline-flex">
-        <div class="w-10 h-10 m-auto rounded-full">
-          <UserImage profile="{item}" size="{10}" />
+{#if itemClasses}
+  <section class="flex mb-4 mr-1 items-center justify-center border rounded-lg shadow-sm customItem {itemClasses}">
+    <div class="flex items-center w-full px-3 pt-1 space-x-2 sm:space-x-6 item-body">
+      <div class="text-center">
+        <div class="inline-flex">
+          <div class="w-10 h-10 m-auto rounded-full">
+            <UserImage profile="{item}" size="{10}" />
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="relative flex-grow text-left truncate">
-      <div class="max-w-full -mt-1 leading-8 cursor-pointer" class:text-dark-lightest="{!item.id || item.id < 1}">
-        {`${item.firstName ? item.firstName : item.value} ${item.lastName ? item.lastName : ""}`}
+      <div class="relative flex-grow text-left truncate">
+        <div class="max-w-full -mt-1 leading-8 cursor-pointer" class:text-dark-lightest="{!item.id || item.id < 1}">
+          {`${item.firstName ? item.firstName : item.value} ${item.lastName ? item.lastName : ""}`}
+        </div>
       </div>
     </div>
-  </div>
-</section>
+  </section>
+{/if}
 
 <style>
 .customItem {

shell/package.json

@@ -118,4 +118,4 @@
   "browserslist": [
     "defaults"
   ]
-}
+}

shell/src/shared/molecules/Select/List.svelte

@@ -29,7 +29,6 @@ export let noOptionsMessage = "No options";
 export let isMulti = false;
 export let activeItemIndex = 0;
 export let filterText = "";
-export let getHighlight = undefined;
 
 let isScrollingTimer = 0;
 let isScrolling = false;
@@ -218,7 +217,7 @@ function isItemHover(hoverItemIndex, item, itemIndex, items) {
 {/if}
 
 {#if !isVirtualList}
-  <div data-simplebar class="listContainer">
+  <div class="listContainer">
     {#if items}
       {#each items as item, i}
         {#if item.isGroupHeader && !item.isSelectable}
@@ -228,9 +227,6 @@ function isItemHover(hoverItemIndex, item, itemIndex, items) {
             <svelte:component
               this="{Item}"
               item="{item}"
-              filterText="{filterText}"
-              getOptionLabel="{getOptionLabel}"
-              getHighlight="{getHighlight}"
               isFirst="{isItemFirst(i)}"
               isActive="{isItemActive(item, selectedValue, optionIdentifier)}"
               isHover="{isItemHover(hoverItemIndex, item, i, items)}" />

yarn.lock

@@ -16032,11 +16032,11 @@ __metadata:
   linkType: hard
 
 "svelecte@npm:^3.13.2":
-  version: 3.13.3
-  resolution: "svelecte@npm:3.13.3"
+  version: 3.16.4
+  resolution: "svelecte@npm:3.16.4"
   dependencies:
     svelte-tiny-virtual-list: ^2.0.0
-  checksum: c9964eaf18006e857b4964c6bb4ed13a3eca7f9f5c8d835fc6a94122daa613a7fe390840e5fcf5458592f618ff9ba42351fe9c4aea36b7ccc1f846d70ad024f2
+  checksum: 61a877478e4c6b3c7295e84642c8b3e4549793d4531ef9fa461ebd4d5a74201aded726362807e6439fc6bfe5ff0a855dd372292b29d5e642639c2d46ec5c9c44
   languageName: node
   linkType: hard