Skip to content

ui: add invalid & single select support in autocomplete #26803

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
harsh-vador merged 5 commits into from
Mar 27, 2026
Merged

ui: add invalid & single select support in autocomplete #26803

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4c9e609
ui: invalid state support
harsh-vador Mar 26, 2026
18b1908
add support for error handling & mutiple and single support in autoco…
harsh-vador Mar 26, 2026
98fb188
fix checkstyle
harsh-vador Mar 27, 2026
72a1aad
remove isAtMax usage
harsh-vador Mar 27, 2026
9e84fba
Merge branch 'main' into autocomplete-invalid-state
harsh-vador Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 28 additions & 6 deletions ...i-core-components/src/main/resources/ui/src/components/base/autocomplete/autocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ interface AutocompleteContextValue {
onInputChange: (value: string) => void;
renderTag?: (item: SelectItemType, onRemove: () => void) => ReactNode;
maxVisibleItems?: number;
multiple: boolean;
}

const AutocompleteContext = createContext<AutocompleteContextValue>({
Expand All @@ -65,6 +66,7 @@ const AutocompleteContext = createContext<AutocompleteContextValue>({
onRemove: () => {},
onInputChange: () => {},
maxVisibleItems: undefined,
multiple: true,
});

interface AutocompleteTriggerProps extends AriaGroupProps {
Expand Down Expand Up @@ -94,6 +96,7 @@ export interface AutocompleteProps
filterOption?: (item: SelectItemType, filterText: string) => boolean;
onSearchChange?: (value: string) => void;
maxVisibleItems?: number;
multiple?: boolean;
}

const renderChipIcon = (item: SelectItemType) => {
Expand Down Expand Up @@ -145,6 +148,12 @@ const InnerAutocomplete = ({
case 'ArrowRight':
focusManager?.focusNext({ wrap: false, tabbable: false });

break;
case 'ArrowDown':
if (comboBoxStateContext && !comboBoxStateContext.isOpen) {
comboBoxStateContext.open();
}

break;
}
};
Expand Down Expand Up @@ -195,7 +204,7 @@ const InnerAutocomplete = ({
};

const isSelectionEmpty = context?.selectedItems?.length === 0;
const { maxVisibleItems } = context;
const { maxVisibleItems, multiple } = context;
const allSelected = context?.selectedItems ?? [];
const visibleSelected =
maxVisibleItems === undefined
Expand Down Expand Up @@ -240,10 +249,11 @@ const InnerAutocomplete = ({
<div
className={cx(
'tw:relative tw:flex tw:min-w-[20%] tw:flex-1 tw:flex-row tw:items-center',
!isSelectionEmpty && 'tw:ml-0.5'
!isSelectionEmpty && 'tw:ml-0.5',
!multiple && !isSelectionEmpty && 'tw:hidden'
)}>
<AriaInput
className="tw:w-full tw:flex-[1_0_0] tw:appearance-none tw:bg-transparent tw:text-md tw:text-ellipsis tw:text-primary tw:caret-alpha-black/90 tw:outline-none tw:placeholder:text-placeholder tw:focus:outline-hidden tw:disabled:cursor-not-allowed tw:disabled:text-disabled tw:disabled:placeholder:text-disabled"
className="tw:w-full tw:flex-[1_0_0] tw:appearance-none tw:bg-transparent tw:text-sm tw:text-ellipsis tw:text-primary tw:caret-alpha-black/90 tw:outline-none tw:placeholder:text-placeholder tw:focus:outline-hidden tw:disabled:cursor-not-allowed tw:disabled:text-disabled tw:disabled:placeholder:text-disabled"
Copy link
Copy Markdown

@gitar-bot gitar-bot bot Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Understood, thanks for the clarification. The tw:text-sm change is intentional.

placeholder={placeholder}
onKeyDown={handleInputKeyDown}
onMouseDown={handleInputMouseDown}
Expand All @@ -258,6 +268,7 @@ const AutocompleteTrigger = ({
placeholder,
placeholderIcon: Icon = SearchLg,
isDisabled: _isDisabled,
isInvalid,
...otherProps
}: AutocompleteTriggerProps) => {
return (
Expand All @@ -267,10 +278,13 @@ const AutocompleteTrigger = ({
cx(
'tw:relative tw:flex tw:w-full tw:items-center tw:gap-2 tw:rounded-lg tw:bg-primary tw:shadow-xs tw:ring-1 tw:ring-primary tw:outline-hidden tw:transition tw:duration-100 tw:ease-linear tw:ring-inset',
isDisabled && 'tw:cursor-not-allowed tw:bg-disabled_subtle',
isInvalid && 'tw:ring-error_subtle',
isFocusWithin && 'tw:ring-2 tw:ring-brand',
isFocusWithin && isInvalid && 'tw:ring-2 tw:ring-error',
sizes[size].root
)
}>
}
isInvalid={isInvalid}>
{({ isDisabled }) => (
<>
{Icon && (
Expand Down Expand Up @@ -298,13 +312,15 @@ export const AutocompleteBase = ({
label,
tooltip,
hint,
isInvalid,
selectedItems,
onItemCleared,
onItemInserted,
placeholder = 'Search',
popoverClassName,
renderTag,
filterOption,
multiple = true,
onSearchChange,
maxVisibleItems,
name: _name,
Expand Down Expand Up @@ -364,6 +380,9 @@ export const AutocompleteBase = ({
if (!id) {
return;
}
if (!multiple && internalSelected.length >= 1) {
return;
}
const item = itemMap.get(id as string);
if (!item) {
return;
Expand Down Expand Up @@ -407,6 +426,7 @@ export const AutocompleteBase = ({
onRemove,
renderTag,
maxVisibleItems,
multiple,
}),
[
selectedKeys,
Expand All @@ -415,6 +435,7 @@ export const AutocompleteBase = ({
onRemove,
renderTag,
maxVisibleItems,
multiple,
]
);

Expand All @@ -425,7 +446,7 @@ export const AutocompleteBase = ({
allowsEmptyCollection
inputValue={filterText}
items={visibleItems}
menuTrigger="focus"
menuTrigger="input"
selectedKey={null}
onInputChange={onInputChange}
onSelectionChange={onSelectionChange}
Expand All @@ -440,6 +461,7 @@ export const AutocompleteBase = ({

<div className="tw:relative tw:w-full" ref={triggerRef}>
<AutocompleteTrigger
isInvalid={isInvalid}
placeholder={placeholder}
placeholderIcon={props.placeholderIcon}
size="sm"
Expand All @@ -460,7 +482,7 @@ export const AutocompleteBase = ({
</AriaListBox>
</Popover>

{hint && <HintText isInvalid={state.isInvalid}>{hint}</HintText>}
{hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}
</div>
)}
</AriaComboBox>
Expand Down
Loading