fix(popper): add beforeShow

Author: koory1st

packages/autocomplete/src/lib/autocomplete.svelte

@@ -27,6 +27,7 @@
   export let highlightFirstItem = false;
   export let fitInputWidth = false;
 
+  let inputRef;
   let suggestions = [];
   let dropdownWidth = '';
   let ignoreFocusEvent = false;
@@ -36,7 +37,15 @@
   let tooltipVisible = false;
   let highlightedIndex = -1;
   $: dark = dark || getContext('svel-dark');
+  $: suggestionVisible = (suggestions.length > 0 || loading) && activated;
+  $: suggestionLoading = !hideLoading && loading;
 
+  const onSuggestionShow = () => {
+    console.log(12);
+    if (suggestionVisible) {
+      dropdownWidth = `${inputRef.offsetWidth}px`;
+    }
+  };
   const getData = async (queryString) => {
     if (suggestionDisabled) return;
 
@@ -95,9 +104,16 @@
     aria-controls="svel-id-6711-108"
     aria-expanded="false"
     aria-haspopup="listbox"
+    on:beforeShow={onSuggestionShow}
     role="combobox"
   >
-    <SvelInput bind:value on:blur={handleInputBlur} on:focus={handleFocus} on:input={handleInput} />
+    <SvelInput
+      bind:this={inputRef}
+      bind:value
+      on:blur={handleInputBlur}
+      on:focus={handleFocus}
+      on:input={handleInput}
+    />
   </div>
   <div slot="content">
     <div role="region">

packages/popper/src/lib/popper.svelte

@@ -1,13 +1,15 @@
 <script>
   import Container from '$lib/container.svelte';
   import { createPopperActions } from '$lib/popper.js';
-  import { getContext, tick } from 'svelte';
+  import { createEventDispatcher, getContext, tick } from 'svelte';
   import a2s from '@svelement-ui/util-array-2-class-string';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import Portal from '$lib/portal.svelte';
   import { writable } from 'svelte/store';
 
+  const dispatch = createEventDispatcher();
+
   let x = 0;
   let y = 0;
   const mousemove = (ev) => {
@@ -147,6 +149,7 @@
   let outer;
 
   async function doShow() {
+    dispatch('beforeShow');
     showTooltip = true;
 
     if (autoClose > 0) {
@@ -161,6 +164,7 @@
   }
 
   function doHide() {
+    dispatch('beforeHide');
     if (contentEl) {
       contentEl.removeEventListener('mouseover', show);
       contentEl.removeEventListener('mouseleave', hide);

packages/popper/src/routes/+page.svelte

@@ -4,6 +4,12 @@
   let ref;
   let visible = false;
   let content = '1';
+  let beforeShow = () => {
+    console.log('1111');
+  };
+  let beforeHide = () => {
+    console.log('2222');
+  };
 </script>
 
 <div class="aaa">
@@ -25,7 +31,7 @@
   <!--  </button>-->
   <!--  <N content="1111" virtualRef={ref} virtualTriggering {visible} />-->
 
-  <N {content}>
+  <N {content} on:beforeHide={beforeHide} on:beforeShow={beforeShow}>
     <button on:click={() => (content += '1')}>111</button>
   </N>
 </div>