diff --git a/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx b/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx index 6b33066ffbb..4d7b8f95367 100644 --- a/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx +++ b/src/mantine-core/src/components/MultiSelect/MultiSelect.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { useId, useUncontrolled } from '@mantine/hooks'; import { BoxProps, @@ -236,6 +236,12 @@ export const MultiSelect = factory((_props, ref) => { )); + useEffect(() => { + if (selectFirstOptionOnChange) { + combobox.selectFirstOption(); + } + }, [selectFirstOptionOnChange, _value]); + const clearButton = clearable && _value.length > 0 && !disabled && !readOnly && ( ((_props, ref) => { /> ); + const filteredData = filterPickedValues({ data: parsedData, value: _value }); + return ( <> ((_props, ref) => { onChange={(event) => { setSearchValue(event.currentTarget.value); searchable && combobox.openDropdown(); + selectFirstOptionOnChange && combobox.selectFirstOption(); }} disabled={disabled} readOnly={readOnly || !searchable} @@ -346,17 +355,15 @@ export const MultiSelect = factory((_props, ref) => {