Skip to content

[@mantine/core] Add openOnFocus prop to Combobox based components (#5893) #8623

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
rtivital merged 1 commit into from
Jan 20, 2026
Merged

[@mantine/core] Add openOnFocus prop to Combobox based components (#5893) #8623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 5 additions & 1 deletion packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,9 @@ export interface AutocompleteProps

/** If set, the highlighted option is selected when the input loses focus @default `false` */
autoSelectOnBlur?: boolean;

/** If set, the dropdown opens when the input receives focus @default `true` */
openOnFocus?: boolean;
}

export type AutocompleteFactory = Factory<{
Expand Down Expand Up @@ -119,6 +122,7 @@ export const Autocomplete = factory<AutocompleteFactory>((_props, ref) => {
clearable,
rightSection,
autoSelectOnBlur,
openOnFocus = true,
attributes,
...others
} = props;
Expand Down Expand Up @@ -214,7 +218,7 @@ export const Autocomplete = factory<AutocompleteFactory>((_props, ref) => {
selectFirstOptionOnChange && combobox.selectFirstOption();
}}
onFocus={(event) => {
combobox.openDropdown();
openOnFocus && combobox.openDropdown();
onFocus?.(event);
}}
Comment on lines 220 to 223
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

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

Add tests for the new openOnFocus prop: by default focusing the input should open the dropdown, and openOnFocus={false} should prevent opening on focus.

Copilot uses AI. Check for mistakes.
onBlur={(event) => {
Expand Down
7 changes: 6 additions & 1 deletion packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,9 @@ export interface MultiSelectProps

/** Clear search value when item is selected */
clearSearchOnChange?: boolean;

/** If set, the dropdown opens when the input receives focus @default `true` */
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

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

openOnFocus is only honored when searchable is true (see onFocus handler below). Please update this prop description to reflect that it does not open the dropdown on focus in non-searchable mode.

Suggested change
/** If set, the dropdown opens when the input receives focus @default `true` */
/** If set and `searchable` is `true`, the dropdown opens when the input receives focus @default `true` */

Copilot uses AI. Check for mistakes.
openOnFocus?: boolean;
}

export type MultiSelectFactory = Factory<{
Expand All @@ -125,6 +128,7 @@ const defaultProps = {
checkIconPosition: 'left',
hiddenInputValuesDivider: ',',
clearSearchOnChange: true,
openOnFocus: true,
size: 'sm',
} satisfies Partial<MultiSelectProps>;

Expand Down Expand Up @@ -207,6 +211,7 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
chevronColor,
attributes,
clearSearchOnChange,
openOnFocus,
...others
} = props;

Expand Down Expand Up @@ -431,7 +436,7 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
unstyled={unstyled}
onFocus={(event) => {
onFocus?.(event);
searchable && combobox.openDropdown();
openOnFocus && searchable && combobox.openDropdown();
}}
Comment on lines 437 to 440
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

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

Add tests for openOnFocus: for a searchable MultiSelect, focusing the input should open the dropdown by default, and should not open when openOnFocus={false} is set.

Copilot uses AI. Check for mistakes.
onBlur={(event) => {
onBlur?.(event);
Expand Down
7 changes: 6 additions & 1 deletion packages/@mantine/core/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@ export interface SelectProps

/** If set, the highlighted option is selected when the input loses focus @default `false` */
autoSelectOnBlur?: boolean;

/** If set, the dropdown opens when the input receives focus @default `true` */
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

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

openOnFocus docs are a bit misleading here: the dropdown only opens on focus when searchable is enabled (see onFocus handler below). Consider updating the prop description to mention that it affects focus behavior only for searchable Selects.

Suggested change
/** If set, the dropdown opens when the input receives focus @default `true` */
/** If set, the dropdown opens when the input receives focus, but only when `searchable` is enabled @default `true` */

Copilot uses AI. Check for mistakes.
openOnFocus?: boolean;
}

export type SelectFactory = Factory<{
Expand All @@ -110,6 +113,7 @@ const defaultProps = {
withCheckIcon: true,
allowDeselect: true,
checkIconPosition: 'left',
openOnFocus: true,
} satisfies Partial<SelectProps>;

export const Select = factory<SelectFactory>((_props, ref) => {
Expand Down Expand Up @@ -168,6 +172,7 @@ export const Select = factory<SelectFactory>((_props, ref) => {
__clearable,
chevronColor,
autoSelectOnBlur,
openOnFocus,
attributes,
...others
} = props;
Expand Down Expand Up @@ -339,7 +344,7 @@ export const Select = factory<SelectFactory>((_props, ref) => {
selectFirstOptionOnChange && combobox.selectFirstOption();
}}
onFocus={(event) => {
!!searchable && combobox.openDropdown();
openOnFocus && !!searchable && combobox.openDropdown();
onFocus?.(event);
}}
Comment on lines 346 to 349
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

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

Add tests for openOnFocus: for a searchable Select, focusing the input should open the dropdown by default, and should not open when openOnFocus={false} is set.

Copilot uses AI. Check for mistakes.
onBlur={(event) => {
Expand Down
7 changes: 6 additions & 1 deletion packages/@mantine/core/src/components/TagsInput/TagsInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,9 @@ export interface TagsInputProps

/** Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. */
isDuplicate?: (value: string, currentValues: string[]) => boolean;

/** If set, the dropdown opens when the input receives focus @default `true` */
openOnFocus?: boolean;
}

export type TagsInputFactory = Factory<{
Expand All @@ -119,6 +122,7 @@ const defaultProps = {
acceptValueOnBlur: true,
splitChars: [','],
hiddenInputValuesDivider: ',',
openOnFocus: true,
size: 'sm',
} satisfies Partial<TagsInputProps>;

Expand Down Expand Up @@ -197,6 +201,7 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
scrollAreaProps,
acceptValueOnBlur,
isDuplicate,
openOnFocus,
attributes,
...others
} = props;
Expand Down Expand Up @@ -457,7 +462,7 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
onKeyDown={handleInputKeydown}
onFocus={(event) => {
onFocus?.(event);
combobox.openDropdown();
openOnFocus && combobox.openDropdown();
}}
Comment on lines 463 to 466
Copy link

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

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

Add test coverage for the new openOnFocus behavior: verify that by default focusing the input opens the dropdown, and that setting openOnFocus={false} prevents opening on focus (while other opening mechanisms still work).

Copilot uses AI. Check for mistakes.
onBlur={(event) => {
onBlur?.(event);
Expand Down
Loading
⚡