#6361·astryx

ComplexSelector: add hasClear/onClear (a consumer-side clear overlay collides with the loading Spinner)

Author: yomybabyCreated Sep 18, 2026Updated Sep 18, 2026

Summary

Selector has hasClear, ComplexSelector does not (checked on 0.5.4 and 0.6.2). A consumer that needs a clearable ComplexSelector has to overlay its own InputClearButton over the trigger, and that overlay collides with the loading Spinner, which ComplexSelector renders in the same slot (between the trigger <button> and the chevron) while isLoading / a pending changeAction is true.

Proposal

Add hasClear?: boolean and onClear?: () => void to ComplexSelectorProps, rendered exactly where Selector renders its clear button — after the Spinner, before the chevron — while triggerLabel != null && !isDisabled. Activating it calls onClear, falling back to onChange(undefined). Because the trigger container owns the popover-open click handler, the clear button's click must stopPropagation() so clearing does not open the popup.

We are running this as a pnpm patch against 0.5.4; the diff is small:

diff
--- a/dist/ComplexSelector/ComplexSelector.js
+++ b/dist/ComplexSelector/ComplexSelector.js
@@ import { Field, inputWrapperStyles } from "../Field/index.js";
+import { InputClearButton } from "../Field/InputClearButton.js";
@@ export function ComplexSelector({
   isLoading = false,
+  hasClear = false,
+  onClear,
   status,
@@
       }), isBusy && /*#__PURE__*/_jsx(Spinner, {
         size: "sm"
+      }), hasClear && triggerLabel != null && !isDisabled && /*#__PURE__*/_jsx(InputClearButton, {
+        label: t('@astryx.selector.clearLabel', { label }),
+        // The container's own click opens the popover; a clear must not.
+        onClick: event => {
+          event.stopPropagation();
+          if (onClear) { onClear(); } else { onChange?.(undefined); }
+        }
       }), /*#__PURE__*/_jsx(Icon, {
         icon: "chevronDown",

plus the two props in ComplexSelector.d.ts. Happy to send this as a PR against the source if the shape is acceptable.

Context

lablup/backend.ai-webui builds its paginated / label-in-value selects on ComplexSelector (the Astryx select variants cannot append pages), so this is the one select primitive we cannot give a clear affordance without reaching into its DOM.