ComplexSelector: add hasClear/onClear (a consumer-side clear overlay collides with the loading Spinner)
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:
--- 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.
Source: facebook/astryx