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

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: harry-ignite

packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx

@@ -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<{
@@ -119,6 +122,7 @@ export const Autocomplete = factory<AutocompleteFactory>((_props, ref) => {
     clearable,
     rightSection,
     autoSelectOnBlur,
+    openOnFocus = true,
     attributes,
     ...others
   } = props;
@@ -214,7 +218,7 @@ export const Autocomplete = factory<AutocompleteFactory>((_props, ref) => {
             selectFirstOptionOnChange && combobox.selectFirstOption();
           }}
           onFocus={(event) => {
-            combobox.openDropdown();
+            openOnFocus && combobox.openDropdown();
             onFocus?.(event);
           }}
           onBlur={(event) => {

packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx

@@ -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` */
+  openOnFocus?: boolean;
 }
 
 export type MultiSelectFactory = Factory<{
@@ -125,6 +128,7 @@ const defaultProps = {
   checkIconPosition: 'left',
   hiddenInputValuesDivider: ',',
   clearSearchOnChange: true,
+  openOnFocus: true,
   size: 'sm',
 } satisfies Partial<MultiSelectProps>;
 
@@ -207,6 +211,7 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
     chevronColor,
     attributes,
     clearSearchOnChange,
+    openOnFocus,
     ...others
   } = props;
 
@@ -431,7 +436,7 @@ export const MultiSelect = factory<MultiSelectFactory>((_props, ref) => {
                   unstyled={unstyled}
                   onFocus={(event) => {
                     onFocus?.(event);
-                    searchable && combobox.openDropdown();
+                    openOnFocus && searchable && combobox.openDropdown();
                   }}
                   onBlur={(event) => {
                     onBlur?.(event);

packages/@mantine/core/src/components/Select/Select.tsx

@@ -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` */
+  openOnFocus?: boolean;
 }
 
 export type SelectFactory = Factory<{
@@ -110,6 +113,7 @@ const defaultProps = {
   withCheckIcon: true,
   allowDeselect: true,
   checkIconPosition: 'left',
+  openOnFocus: true,
 } satisfies Partial<SelectProps>;
 
 export const Select = factory<SelectFactory>((_props, ref) => {
@@ -168,6 +172,7 @@ export const Select = factory<SelectFactory>((_props, ref) => {
     __clearable,
     chevronColor,
     autoSelectOnBlur,
+    openOnFocus,
     attributes,
     ...others
   } = props;
@@ -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);
             }}
             onBlur={(event) => {

packages/@mantine/core/src/components/TagsInput/TagsInput.tsx

@@ -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<{
@@ -119,6 +122,7 @@ const defaultProps = {
   acceptValueOnBlur: true,
   splitChars: [','],
   hiddenInputValuesDivider: ',',
+  openOnFocus: true,
   size: 'sm',
 } satisfies Partial<TagsInputProps>;
 
@@ -197,6 +201,7 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
     scrollAreaProps,
     acceptValueOnBlur,
     isDuplicate,
+    openOnFocus,
     attributes,
     ...others
   } = props;
@@ -457,7 +462,7 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
                   onKeyDown={handleInputKeydown}
                   onFocus={(event) => {
                     onFocus?.(event);
-                    combobox.openDropdown();
+                    openOnFocus && combobox.openDropdown();
                   }}
                   onBlur={(event) => {
                     onBlur?.(event);