Fix SelectField menu icons & toggle collapsing btn

Fix SelectField toggle button not collapsing.

Author: willnationsdev

.changeset/bright-donuts-appear.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+Fix SelectField MenuOption icons no longer being passed to MenuItems. Fix SelectField toggle button not collapsing. Add `element` and `iconSpan` exports to `Button` so that the elements can be directly accessed from ancestor contexts. Fix SelectField `fieldClasses` not being incorporated into the inner `TextField` properly. Update SelectField docs page with colored example that differentiates icon & input color, both in the field and the menu items.

packages/svelte-ux/src/lib/components/Button.svelte

@@ -20,6 +20,9 @@
   export let iconOnly = icon !== undefined && $$slots.default !== true;
   export let actions: Actions<HTMLAnchorElement | HTMLButtonElement> | undefined = undefined;
 
+  export let element: HTMLAnchorElement | HTMLButtonElement | undefined | null = undefined;
+  export let iconSpan: HTMLSpanElement | undefined | null = undefined;
+
   export let loading: boolean = false;
   export let disabled: boolean = false;
   export let rounded: boolean | 'full' | undefined = undefined; // default in reactive groupContext below
@@ -240,6 +243,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <svelte:element
   this={href ? 'a' : 'button'}
+  bind:this={element}
   {href}
   {target}
   {type}
@@ -255,11 +259,11 @@
   on:blur
 >
   {#if loading}
-    <span transition:slide={{ axis: 'x', duration: 200 }}>
+    <span bind:this={iconSpan} transition:slide={{ axis: 'x', duration: 200 }}>
       <ProgressCircle size={16} width={2} class={cls(theme.loading, classes.loading)} />
     </span>
   {:else if icon}
-    <span in:slide={{ axis: 'x', duration: 200 }}>
+    <span bind:this={iconSpan} in:slide={{ axis: 'x', duration: 200 }}>
       {#if typeof icon === 'string' || 'icon' in icon}
         <!-- font path/url/etc or font-awesome IconDefinition -->
         <Icon data={asIconData(icon)} class={cls('pointer-events-none', theme.icon, classes.icon)} />

packages/svelte-ux/src/lib/components/SelectField.svelte

@@ -19,6 +19,11 @@
   import type { MenuOption } from '$lib/types/options';
   import type { ScrollIntoViewOptions } from '$lib/actions';
 
+  type LogReason<T extends Event = any> = {
+    reason: string,
+    event?: T
+  }
+
   const dispatch = createEventDispatcher<{
     change: { value: any; option: any };
     inputChange: string;
@@ -51,14 +56,16 @@
     : undefined;
 
   let originalIcon = icon;
+  let toggleButtonElement: ComponentProps<Button>['element'] = undefined;
+  let toggleButtonIconSpan: ComponentProps<Button>['iconElement'] = undefined;
 
   export let scrollIntoView: Partial<ScrollIntoViewOptions> = {};
 
   export let classes: {
     root?: string;
     field?: string | ComponentProps<TextField>['classes'];
     options?: string;
-    option?: string;
+    option?: string | ComponentProps<MenuItem>['classes'];
     selected?: string;
     group?: string;
     empty?: string;
@@ -68,6 +75,9 @@
   let fieldClasses: ComponentProps<TextField>['classes'];
   $: fieldClasses = typeof(classes.field) === "string" ? { root: classes.field } : classes.field;
 
+  let optionClasses: ComponentProps<MenuItem>['classes'];
+  $: optionClasses = typeof(classes.option) === "string" ? { root: classes.option } : classes.option;
+
   // Menu props
   export let placement: Placement = 'bottom-start';
   export let autoPlacement = true;
@@ -194,17 +204,27 @@
     });
   }
 
+  function isToggleButtonClicked(ev: MouseEvent) {
+    return toggleButtonIconSpan && toggleButtonIconSpan === ev.target;
+  }
+
+  function isToggleButtonRelated(ev: MouseEvent|FocusEvent) {
+    return toggleButtonElement && toggleButtonElement === ev.relatedTarget;
+  }
+
   function onChange(e: ComponentEvents<TextField>['change']) {
     logger.debug('onChange');
 
     searchText = e.detail.inputValue as string;
     dispatch('inputChange', searchText);
-    show();
+    show({ reason: "onChange", event: e });
   }
 
-  function onFocus() {
-    logger.debug('onFocus');
-    show();
+  function onFocus(event: FocusEvent) {
+    if (isToggleButtonRelated(event)) {
+      return;
+    }
+    show({ reason: "onFocus", event });
   }
 
   function onBlur(e: FocusEvent|CustomEvent<any>) {
@@ -216,9 +236,10 @@
       fe.relatedTarget instanceof HTMLElement &&
       !menuOptionsEl?.contains(fe.relatedTarget) && // TODO: Oddly Safari does not set `relatedTarget` to the clicked on menu option (like Chrome and Firefox) but instead appears to take `tabindex` into consideration.  Currently resolves to `.options` after setting `tabindex="-1"
       fe.relatedTarget !== menuOptionsEl?.offsetParent && // click on scroll bar
-      !fe.relatedTarget.closest('menu > [slot=actions]') // click on action item
+      !fe.relatedTarget.closest('menu > [slot=actions]') && // click on action item
+      !isToggleButtonRelated(fe) // click on toggle button
     ) {
-      hide('blur');
+      hide({ reason: 'blur', event: e });
     } else {
       logger.debug('ignoring blur');
     }
@@ -237,7 +258,7 @@
         break;
 
       case 'ArrowDown':
-        show();
+        show({ reason: `onKeyDown: '${e.key}'`, event: e });
         if (highlightIndex < filteredOptions.length - 1) {
           highlightIndex++;
         } else {
@@ -247,7 +268,7 @@
         break;
 
       case 'ArrowUp':
-        show();
+        show({ reason: `onKeyDown: '${e.key}'`, event: e });
         if (highlightIndex > 0) {
           highlightIndex--;
         } else {
@@ -259,7 +280,7 @@
       case 'Escape':
         if (open) {
           inputEl?.focus();
-          hide('escape');
+          hide({ reason: 'escape', event: e });
         }
         break;
     }
@@ -274,15 +295,18 @@
     }
   }
 
-  function onClick() {
-    logger.debug('onClick');
-    show();
+  function onClick(event: MouseEvent) {
+    if (isToggleButtonClicked(event) || isToggleButtonRelated(event)) {
+      return;
+    }
+    show({ reason: 'onClick', event });
   }
 
-  function show() {
-    logger.debug('show');
+  function show<T extends LogReason = any>(reason: string|T = '') {
+    const doShow = !disabled && !readonly;
+    logger.debug('show', { ...(typeof(reason) === "string" ? { reason } : reason), openBefore: open, openAfter: doShow });
 
-    if (!disabled && !readonly) {
+    if (doShow) {
       if (open === false && clearSearchOnOpen) {
         searchText = ''; // Show all options on open
       }
@@ -291,8 +315,8 @@
     }
   }
 
-  function hide(reason = '') {
-    logger.debug('hide', { reason });
+  function hide<T extends LogReason = any>(reason: string|T = '') {
+    logger.debug('hide', { ...(typeof(reason) === "string" ? { reason } : reason), openBefore: open, openAfter: false });
     open = false;
     highlightIndex = -1;
   }
@@ -384,8 +408,8 @@
     on:keydown={onKeyDown}
     on:keypress={onKeyPress}
     actions={fieldActions}
-    classes={{ container: inlineOptions ? 'border-none shadow-none hover:shadow-none group-focus-within:shadow-none' : undefined }}
-    class={cls('h-full', theme.field, fieldClasses)}
+    classes={{ ...(fieldClasses ?? {}), container: inlineOptions ? 'border-none shadow-none hover:shadow-none group-focus-within:shadow-none' : undefined }}
+    class={cls('h-full', theme.field)}
     role="combobox"
     aria-expanded={open ? "true" : "false"}
     aria-autocomplete={!inlineOptions ? "list" : undefined}
@@ -417,7 +441,13 @@
           icon={toggleIcon}
           class="text-black/50 p-1 transform {open ? 'rotate-180' : ''}"
           tabindex="-1"
-          on:click={() => {logger.debug("toggleIcon clicked")}}
+          bind:element={toggleButtonElement}
+          bind:iconElement={toggleButtonIconSpan}
+          on:click={(e) => {
+            logger.debug("toggleIcon clicked", { event: e, open })
+            const func = !open ? show : hide;
+            func({ reason: "toggleIcon", event: e });
+          }}
         />
       {/if}
     </span>
@@ -434,7 +464,7 @@
         {disableTransition}
         moveFocus={false}
         bind:open
-        on:close={() => hide('menu on:close')}
+        on:close={e => hide({ reason: 'menu on:close', event: e})}
         {...menuProps}
         >
         <!-- TODO: Rework into hierarchy of snippets in v2.0 -->
@@ -447,13 +477,15 @@
           <svelte:fragment slot="option" let:option let:index>
             <slot name="option" {option} {index} {selected} {value} {highlightIndex}>
               <MenuItem
+                classes={optionClasses}
                 class={cls(
                   index === highlightIndex && '[:not(.group:hover)>&]:bg-black/5',
                   option === selected && (classes.selected || 'font-semibold'),
                   option.group ? 'px-4' : 'px-2',
                   theme.option,
                   classes.option
                 )}
+                icon={option.icon}
                 scrollIntoView={{ condition: index === highlightIndex, onlyIfNeeded: inlineOptions, ...scrollIntoView }}
                 role="option"
                 aria-selected={option === selected ? "true" : "false"}
@@ -485,13 +517,15 @@
           <svelte:fragment slot="option" let:option let:index>
             <slot name="option" {option} {index} {selected} {value} {highlightIndex}>
               <MenuItem
+                classes={optionClasses}
                 class={cls(
                   index === highlightIndex && '[:not(.group:hover)>&]:bg-black/5',
                   option === selected && (classes.selected || 'font-semibold'),
                   option.group ? 'px-4' : 'px-2',
                   theme.option,
                   classes.option
                 )}
+                icon={option.icon}
                 scrollIntoView={{ condition: index === highlightIndex, onlyIfNeeded: inlineOptions, ...scrollIntoView }}
                 role="option"
                 aria-selected={option === selected ? "true" : "false"}

packages/svelte-ux/src/lib/components/TextField.svelte

@@ -65,6 +65,7 @@
     error?: string;
     prepend?: string;
     append?: string;
+    icon?: string;
   } = {};
   const theme = getComponentTheme('TextField');
 
@@ -248,7 +249,7 @@
             <slot name="prepend" />
             {#if icon}
               <span class="mr-3">
-                <Icon data={asIconData(icon)} class="text-black/50" />
+                <Icon data={asIconData(icon)} class={cls("text-black/50", classes.icon)} />
               </span>
             {/if}
           </div>

packages/svelte-ux/src/lib/components/_SelectListOptions.svelte

@@ -24,10 +24,7 @@
 
   export let classes: {
     root?: string;
-    option?: string;
-    selected?: string;
     group?: string;
-    empty?: string;
   } = {};
 
   const theme = getComponentTheme('SelectField');

packages/svelte-ux/src/routes/docs/components/SelectField/+page.svelte

@@ -13,7 +13,6 @@
 
   import { delay } from '$lib/utils/promise';
   import { cls } from '$lib/utils/styles';
-  import Icon from '$lib/components/Icon.svelte';
   import type { MenuOption } from '$lib/types/options';
 
   let options: MenuOption[] = [
@@ -176,22 +175,9 @@
     {options}
     bind:value
     activeOptionIcon={true}
+    classes={{ field: { icon: 'text-pink-300', input: 'text-blue-600' }, option: { root: 'text-blue-600', icon: 'text-pink-300' } }}
     on:change={(e) => console.log('on:change', e.detail)}
-  >
-    <div slot="option" let:option let:index let:selected let:highlightIndex>
-      <MenuItem
-        class={cls(
-          index === highlightIndex && 'bg-black/5',
-          option === selected && 'font-semibold',
-          option.group ? 'px-4' : 'px-2'
-        )}
-        scrollIntoView={index === highlightIndex}
-        icon={{ data: option.icon, style: 'color: #0000FF;' }}
-      >
-        {option.label}
-      </MenuItem>
-    </div>
-  </SelectField>
+  />
 </Preview>
 
 <h2>option with action</h2>