[Autocomplete] Fix GitHub's demo behavior (#19928)

docs/pages/api-docs/autocomplete.md

@@ -59,7 +59,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">multiple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, `value` must be an array and the menu will support multiple selections. |
 | <span class="prop-name">noOptionsText</span> | <span class="prop-type">node</span> | <span class="prop-default">'No options'</span> | Text to display when there are no options.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: T, reason: string) => void`<br>*event:* The event source of the callback.<br>*value:* null<br>*reason:* One of "create-option", "select-option", "remove-option", "blur" or "clear". |
-| <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the popup requests to be closed. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
+| <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the popup requests to be closed. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback.<br>*reason:* Can be: `"toggleInput"`, `"escape"`, `"select-option"`, `"blur"`. |
 | <span class="prop-name">onInputChange</span> | <span class="prop-type">func</span> |  | Callback fired when the input value changes.<br><br>**Signature:**<br>`function(event: object, value: string, reason: string) => void`<br>*event:* The event source of the callback.<br>*value:* The new value of the text input.<br>*reason:* Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`. |
 | <span class="prop-name">onOpen</span> | <span class="prop-type">func</span> |  | Callback fired when the popup requests to be opened. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name">open</span> | <span class="prop-type">bool</span> |  | Control the popup` open state. |

docs/src/pages/components/autocomplete/GitHubLabel.js

@@ -128,7 +128,10 @@ export default function GitHubLabel() {
     setAnchorEl(event.currentTarget);
   };
 
-  const handleClose = () => {
+  const handleClose = (event, reason) => {
+    if (reason === 'toggleInput') {
+      return;
+    }
     setValue(pendingValue);
     if (anchorEl) {
       anchorEl.focus();

docs/src/pages/components/autocomplete/GitHubLabel.tsx

@@ -5,7 +5,7 @@ import Popper from '@material-ui/core/Popper';
 import SettingsIcon from '@material-ui/icons/Settings';
 import CloseIcon from '@material-ui/icons/Close';
 import DoneIcon from '@material-ui/icons/Done';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import Autocomplete, { AutocompleteCloseReason } from '@material-ui/lab/Autocomplete';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import InputBase from '@material-ui/core/InputBase';
 
@@ -130,7 +130,10 @@ export default function GitHubLabel() {
     setAnchorEl(event.currentTarget);
   };
 
-  const handleClose = () => {
+  const handleClose = (event: React.ChangeEvent<{}>, reason: AutocompleteCloseReason) => {
+    if (reason === 'toggleInput') {
+      return;
+    }
     setValue(pendingValue);
     if (anchorEl) {
       anchorEl.focus();

packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts

@@ -2,13 +2,21 @@ import * as React from 'react';
 import { StandardProps } from '@material-ui/core';
 import { PopperProps } from '@material-ui/core/Popper';
 import {
-  ChangeReason,
-  ChangeDetails,
-  UseAutocompleteCommonProps,
+  AutocompleteChangeDetails,
+  AutocompleteChangeReason,
+  AutocompleteCloseReason,
+  AutocompleteInputChangeReason,
   createFilterOptions,
+  UseAutocompleteCommonProps,
   UseAutocompleteProps,
 } from '../useAutocomplete';
-export { ChangeReason, ChangeDetails, createFilterOptions };
+export {
+  AutocompleteChangeDetails,
+  AutocompleteChangeReason,
+  AutocompleteCloseReason,
+  AutocompleteInputChangeReason,
+  createFilterOptions,
+};
 
 export interface RenderOptionState {
   inputValue: string;

packages/material-ui-lab/src/Autocomplete/Autocomplete.js

@@ -668,6 +668,7 @@ Autocomplete.propTypes = {
    * Use in controlled mode (see open).
    *
    * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"select-option"`, `"blur"`.
    */
   onClose: PropTypes.func,
   /**

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts

@@ -126,8 +126,9 @@ export interface UseAutocompleteCommonProps<T> {
    * Use in controlled mode (see open).
    *
    * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"select-option"`, `"blur"`.
    */
-  onClose?: (event: React.ChangeEvent<{}>) => void;
+  onClose?: (event: React.ChangeEvent<{}>, reason: AutocompleteCloseReason) => void;
   /**
    * Callback fired when the input value changes.
    *
@@ -138,7 +139,7 @@ export interface UseAutocompleteCommonProps<T> {
   onInputChange?: (
     event: React.ChangeEvent<{}>,
     value: string,
-    reason: 'input' | 'reset' | 'clear',
+    reason: AutocompleteInputChangeReason,
   ) => void;
   /**
    * Callback fired when the popup requests to be opened.
@@ -166,10 +167,18 @@ export interface UseAutocompleteCommonProps<T> {
   selectOnFocus?: boolean;
 }
 
-export type ChangeReason = 'create-option' | 'select-option' | 'remove-option' | 'clear' | 'blur';
-export interface ChangeDetails<T = string> {
+export type AutocompleteChangeReason =
+  | 'create-option'
+  | 'select-option'
+  | 'remove-option'
+  | 'clear'
+  | 'blur';
+export interface AutocompleteChangeDetails<T = string> {
   option: T;
 }
+export type AutocompleteCloseReason = 'toggleInput' | 'escape' | 'select-option' | 'blur';
+export type AutocompleteInputChangeReason = 'input' | 'reset' | 'clear';
+
 export interface UseAutocompleteMultipleProps<T> extends UseAutocompleteCommonProps<T> {
   /**
    * If `true`, `value` must be an array and the menu will support multiple selections.
@@ -196,8 +205,8 @@ export interface UseAutocompleteMultipleProps<T> extends UseAutocompleteCommonPr
   onChange?: (
     event: React.ChangeEvent<{}>,
     value: T[],
-    reason: ChangeReason,
-    details?: ChangeDetails<T>,
+    reason: AutocompleteChangeReason,
+    details?: AutocompleteChangeDetails<T>,
   ) => void;
 }
 
@@ -227,8 +236,8 @@ export interface UseAutocompleteSingleProps<T> extends UseAutocompleteCommonProp
   onChange?: (
     event: React.ChangeEvent<{}>,
     value: T | null,
-    reason: ChangeReason,
-    details?: ChangeDetails<T>,
+    reason: AutocompleteChangeReason,
+    details?: AutocompleteChangeDetails<T>,
   ) => void;
 }
 

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js

@@ -426,13 +426,13 @@ export default function useAutocomplete(props) {
     }
   };
 
-  const handleClose = event => {
+  const handleClose = (event, reason) => {
     if (!open) {
       return;
     }
 
     if (onClose) {
-      onClose(event);
+      onClose(event, reason);
     }
     if (!isOpenControlled) {
       setOpenState(false);
@@ -487,7 +487,7 @@ export default function useAutocomplete(props) {
 
     handleValue(event, newValue, reason, { option });
     if (!disableCloseOnSelect) {
-      handleClose(event);
+      handleClose(event, reason);
     }
   };
 
@@ -528,7 +528,7 @@ export default function useAutocomplete(props) {
       return;
     }
 
-    handleClose(event);
+    handleClose(event, 'toggleInput');
 
     let nextTag = focusedTag;
 
@@ -647,7 +647,7 @@ export default function useAutocomplete(props) {
           event.preventDefault();
           // Avoid the Modal to handle the event.
           event.stopPropagation();
-          handleClose(event);
+          handleClose(event, 'escape');
         } else if (clearOnEscape && (inputValue !== '' || (multiple && value.length > 0))) {
           // Avoid Opera to exit fullscreen mode.
           event.preventDefault();
@@ -708,7 +708,7 @@ export default function useAutocomplete(props) {
       resetInputValue(event, value);
     }
 
-    handleClose(event);
+    handleClose(event, 'blur');
   };
 
   const handleInputChange = event => {
@@ -783,7 +783,7 @@ export default function useAutocomplete(props) {
 
   const handlePopupIndicator = event => {
     if (open) {
-      handleClose(event);
+      handleClose(event, 'toggleInput');
     } else {
       handleOpen(event);
     }

packages/material-ui/src/Snackbar/Snackbar.d.ts

@@ -9,6 +9,8 @@ export interface SnackbarOrigin {
   horizontal: 'left' | 'center' | 'right';
 }
 
+export type SnackbarCloseReason = 'timeout' | 'clickaway';
+
 export interface SnackbarProps
   extends StandardProps<
     React.HTMLAttributes<HTMLDivElement> & Partial<TransitionHandlerProps>,
@@ -21,7 +23,7 @@ export interface SnackbarProps
   ContentProps?: Partial<SnackbarContentProps>;
   disableWindowBlurListener?: boolean;
   message?: SnackbarContentProps['message'];
-  onClose?: (event: React.SyntheticEvent<any>, reason: string) => void;
+  onClose?: (event: React.SyntheticEvent<any>, reason: SnackbarCloseReason) => void;
   onMouseEnter?: React.MouseEventHandler<any>;
   onMouseLeave?: React.MouseEventHandler<any>;
   open: boolean;