diff --git a/packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx b/packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx index 7038aa2b00..fe2b07842b 100644 --- a/packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx +++ b/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((_props, ref) => { clearable, rightSection, autoSelectOnBlur, + openOnFocus = true, attributes, ...others } = props; @@ -214,7 +218,7 @@ export const Autocomplete = factory((_props, ref) => { selectFirstOptionOnChange && combobox.selectFirstOption(); }} onFocus={(event) => { - combobox.openDropdown(); + openOnFocus && combobox.openDropdown(); onFocus?.(event); }} onBlur={(event) => { diff --git a/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx b/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx index e2267c2adf..6610f0f696 100644 --- a/packages/@mantine/core/src/components/MultiSelect/MultiSelect.tsx +++ b/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; @@ -207,6 +211,7 @@ export const MultiSelect = factory((_props, ref) => { chevronColor, attributes, clearSearchOnChange, + openOnFocus, ...others } = props; @@ -431,7 +436,7 @@ export const MultiSelect = factory((_props, ref) => { unstyled={unstyled} onFocus={(event) => { onFocus?.(event); - searchable && combobox.openDropdown(); + openOnFocus && searchable && combobox.openDropdown(); }} onBlur={(event) => { onBlur?.(event); diff --git a/packages/@mantine/core/src/components/Select/Select.tsx b/packages/@mantine/core/src/components/Select/Select.tsx index fec5b5156f..a4a87018be 100644 --- a/packages/@mantine/core/src/components/Select/Select.tsx +++ b/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; export const Select = factory((_props, ref) => { @@ -168,6 +172,7 @@ export const Select = factory((_props, ref) => { __clearable, chevronColor, autoSelectOnBlur, + openOnFocus, attributes, ...others } = props; @@ -339,7 +344,7 @@ export const Select = factory((_props, ref) => { selectFirstOptionOnChange && combobox.selectFirstOption(); }} onFocus={(event) => { - !!searchable && combobox.openDropdown(); + openOnFocus && !!searchable && combobox.openDropdown(); onFocus?.(event); }} onBlur={(event) => { diff --git a/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx b/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx index f7d1abe50c..b95827a0c1 100644 --- a/packages/@mantine/core/src/components/TagsInput/TagsInput.tsx +++ b/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; @@ -197,6 +201,7 @@ export const TagsInput = factory((_props, ref) => { scrollAreaProps, acceptValueOnBlur, isDuplicate, + openOnFocus, attributes, ...others } = props; @@ -457,7 +462,7 @@ export const TagsInput = factory((_props, ref) => { onKeyDown={handleInputKeydown} onFocus={(event) => { onFocus?.(event); - combobox.openDropdown(); + openOnFocus && combobox.openDropdown(); }} onBlur={(event) => { onBlur?.(event);