diff --git a/docs/translations/api-docs-joy/autocomplete/autocomplete.json b/docs/translations/api-docs-joy/autocomplete/autocomplete.json index ae572296547d1a..0f57da64cf78f5 100644 --- a/docs/translations/api-docs-joy/autocomplete/autocomplete.json +++ b/docs/translations/api-docs-joy/autocomplete/autocomplete.json @@ -33,7 +33,7 @@ "onChange": "Callback fired when the value changes.

Signature:
function(event: React.SyntheticEvent, value: T | Array<T>, reason: string, details?: string) => void
event: The event source of the callback.
value: The new value of the component.
reason: One of "createOption", "selectOption", "removeOption", "blur" or "clear".", "onClose": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).

Signature:
function(event: React.SyntheticEvent, reason: string) => void
event: The event source of the callback.
reason: Can be: "toggleInput", "escape", "selectOption", "removeOption", "blur".", "onHighlightChange": "Callback fired when the highlight option changes.

Signature:
function(event: React.SyntheticEvent, option: T, reason: string) => void
event: The event source of the callback.
option: The highlighted option.
reason: Can be: "keyboard", "auto", "mouse", "touch".", - "onInputChange": "Callback fired when the input value changes.

Signature:
function(event: React.SyntheticEvent, value: string, reason: string) => void
event: The event source of the callback.
value: The new value of the text input.
reason: Can be: "input" (user input), "reset" (programmatic change), "clear".", + "onInputChange": "Callback fired when the input value changes.

Signature:
function(event: React.SyntheticEvent, value: string, reason: string) => void
event: The event source of the callback.
value: The new value of the text input.
reason: Can be: "input" (user input), "reset" (programmatic change), "clear", "blur", "selectOption", "removeOption"", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).

Signature:
function(event: React.SyntheticEvent) => void
event: The event source of the callback.", "open": "If true, the component is shown.", "openText": "Override the default text for the open popup icon button.
For localization purposes, you can use the provided translations.", diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json index 54ebd6ebd1aba9..c3d5fd1d988a97 100644 --- a/docs/translations/api-docs/autocomplete/autocomplete.json +++ b/docs/translations/api-docs/autocomplete/autocomplete.json @@ -44,7 +44,7 @@ "onChange": "Callback fired when the value changes.

Signature:
function(event: React.SyntheticEvent, value: T | Array<T>, reason: string, details?: string) => void
event: The event source of the callback.
value: The new value of the component.
reason: One of "createOption", "selectOption", "removeOption", "blur" or "clear".", "onClose": "Callback fired when the popup requests to be closed. Use in controlled mode (see open).

Signature:
function(event: React.SyntheticEvent, reason: string) => void
event: The event source of the callback.
reason: Can be: "toggleInput", "escape", "selectOption", "removeOption", "blur".", "onHighlightChange": "Callback fired when the highlight option changes.

Signature:
function(event: React.SyntheticEvent, option: T, reason: string) => void
event: The event source of the callback.
option: The highlighted option.
reason: Can be: "keyboard", "auto", "mouse", "touch".", - "onInputChange": "Callback fired when the input value changes.

Signature:
function(event: React.SyntheticEvent, value: string, reason: string) => void
event: The event source of the callback.
value: The new value of the text input.
reason: Can be: "input" (user input), "reset" (programmatic change), "clear".", + "onInputChange": "Callback fired when the input value changes.

Signature:
function(event: React.SyntheticEvent, value: string, reason: string) => void
event: The event source of the callback.
value: The new value of the text input.
reason: Can be: "input" (user input), "reset" (programmatic change), "clear", "blur", "selectOption", "removeOption"", "onOpen": "Callback fired when the popup requests to be opened. Use in controlled mode (see open).

Signature:
function(event: React.SyntheticEvent) => void
event: The event source of the callback.", "open": "If true, the component is shown.", "openOnFocus": "If true, the popup will open on input focus.", diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts b/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts index 1dba726eb5633b..ebf7c2b4c808d5 100644 --- a/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts +++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts @@ -249,7 +249,7 @@ export interface UseAutocompleteProps< * * @param {React.SyntheticEvent} event The event source of the callback. * @param {string} value The new value of the text input. - * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`. + * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`, `"blur"`, `"selectOption"`, `"removeOption"` */ onInputChange?: ( event: React.SyntheticEvent, @@ -321,7 +321,13 @@ export type AutocompleteCloseReason = | 'selectOption' | 'removeOption' | 'blur'; -export type AutocompleteInputChangeReason = 'input' | 'reset' | 'clear'; +export type AutocompleteInputChangeReason = + | 'input' + | 'reset' + | 'clear' + | 'blur' + | 'selectOption' + | 'removeOption'; export type AutocompleteGetTagProps = ({ index }: { index: number }) => { key: number; diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.js b/packages/mui-base/src/useAutocomplete/useAutocomplete.js index 01f6b23281cc24..001c39fb1d1da2 100644 --- a/packages/mui-base/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.js @@ -247,7 +247,7 @@ export default function useAutocomplete(props) { return; } - resetInputValue(null, value); + resetInputValue(null, value, 'reset'); }, [value, resetInputValue, focused, previousProps.value, freeSolo]); const listboxAvailable = open && filteredOptions.length > 0 && !readOnly; diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx index ae9623806da9b5..70e87e23c5cef8 100644 --- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx +++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx @@ -1886,24 +1886,31 @@ describe('Joy ', () => { it('provides a reason on select reset', () => { const handleInputChange = spy(); - const options = [{ name: 'foo' }]; - render( - option.name} - autoFocus - />, - ); - const textbox = screen.getByRole('combobox'); + const options = [{ name: 'foo' }, { name: 'bar' }]; - fireEvent.keyDown(textbox, { key: 'ArrowDown' }); - fireEvent.keyDown(textbox, { key: 'Enter' }); + function MyComponent() { + const [value, setValue] = React.useState(options[0]); + return ( + + option.name} + value={value} + /> + + + ); + } + render(); + const resetBtn = screen.getByText('Reset'); - expect(handleInputChange.callCount).to.equal(1); - expect(handleInputChange.args[0][1]).to.equal(options[0].name); - expect(handleInputChange.args[0][2]).to.equal('reset'); + fireEvent.click(resetBtn); + + expect(handleInputChange.callCount).to.equal(4); + expect(handleInputChange.args[3][1]).to.equal(options[1].name); + expect(handleInputChange.args[3][2]).to.equal('reset'); }); }); diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx index f4dcd68457e2b6..0d8d4840d2880d 100644 --- a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx +++ b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx @@ -976,7 +976,7 @@ Autocomplete.propTypes /* remove-proptypes */ = { * * @param {React.SyntheticEvent} event The event source of the callback. * @param {string} value The new value of the text input. - * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`. + * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`, `"blur"`, `"selectOption"`, `"removeOption"` */ onInputChange: PropTypes.func, /** diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index c522b77f98bec0..d7a4afa33a826b 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -989,7 +989,7 @@ Autocomplete.propTypes /* remove-proptypes */ = { * * @param {React.SyntheticEvent} event The event source of the callback. * @param {string} value The new value of the text input. - * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`. + * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`, `"blur"`, `"selectOption"`, `"removeOption"` */ onInputChange: PropTypes.func, /** diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index 55c4207cadba46..7299acd5ed7076 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -2304,24 +2304,32 @@ describe('', () => { it('provides a reason on select reset', () => { const handleInputChange = spy(); - const options = [{ name: 'foo' }]; - render( - option.name} - renderInput={(params) => } - />, - ); - const textbox = screen.getByRole('combobox'); + const options = [{ name: 'foo' }, { name: 'bar' }]; - fireEvent.keyDown(textbox, { key: 'ArrowDown' }); - fireEvent.keyDown(textbox, { key: 'Enter' }); + function MyComponent() { + const [value, setValue] = React.useState(options[0]); + return ( + + option.name} + renderInput={(params) => } + value={value} + /> + + + ); + } + render(); + const resetBtn = screen.getByText('Reset'); - expect(handleInputChange.callCount).to.equal(1); - expect(handleInputChange.args[0][1]).to.equal(options[0].name); - expect(handleInputChange.args[0][2]).to.equal('reset'); + fireEvent.click(resetBtn); + + expect(handleInputChange.callCount).to.equal(3); + expect(handleInputChange.args[2][1]).to.equal(options[1].name); + expect(handleInputChange.args[2][2]).to.equal('reset'); }); });