downshift 6.1.8 → 6.1.10-alpha.0

package/README.md

@@ -1410,6 +1410,7 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://github.com/KaiminHuang"><img src="https://avatars.githubusercontent.com/u/5600404?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kaimin Huang</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=KaiminHuang" title="Code">💻</a> <a href="https://github.com/downshift-js/downshift/issues?q=author%3AKaiminHuang" title="Bug reports">🐛</a></td>
     <td align="center"><a href="http://theredcircuit.com"><img src="https://avatars.githubusercontent.com/u/1242456?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Welling</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=davewelling" title="Code">💻</a> <a href="https://github.com/downshift-js/downshift/issues?q=author%3Adavewelling" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://github.com/chandrasekhar1996"><img src="https://avatars.githubusercontent.com/u/33996892?v=4?s=100" width="100px;" alt=""/><br /><sub><b>chandrasekhar1996</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/issues?q=author%3Achandrasekhar1996" title="Bug reports">🐛</a> <a href="https://github.com/downshift-js/downshift/commits?author=chandrasekhar1996" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/drewbrend"><img src="https://avatars.githubusercontent.com/u/5375799?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Brendan Drew</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=drewbrend" title="Code">💻</a></td>
   </tr>
 </table>
 

package/dist/downshift.cjs.js

@@ -188,7 +188,7 @@ function getA11yStatusMessage$1(_ref2) {
   }
 
   if (resultCount !== previousResultCount) {
-    return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
+    return `${resultCount} result${resultCount === 1 ? ' is' : 's are'} available, use up and down arrow keys to navigate. Press Enter key to select.`;
   }
 
   return '';
@@ -244,7 +244,7 @@ function getElementProps(element) {
 
 function requiredProp(fnName, propName) {
   // eslint-disable-next-line no-console
-  console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
+  console.error(`The property "${propName}" is required in "${fnName}"`);
 }
 
 const stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
@@ -314,7 +314,7 @@ function normalizeArrowKey(event) {
   /* istanbul ignore next (ie) */
 
   if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
-    return "Arrow" + key;
+    return `Arrow${key}`;
   }
 
   return key;
@@ -438,14 +438,14 @@ let validateControlledUnchanged = noop;
 
 if (process.env.NODE_ENV !== 'production') {
   validateControlledUnchanged = (state, prevProps, nextProps) => {
-    const warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
+    const warningDescription = `This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props`;
     Object.keys(state).forEach(propKey => {
       if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
         // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
+        console.error(`downshift: A component has changed the controlled prop "${propKey}" to be uncontrolled. ${warningDescription}`);
       } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
         // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
+        console.error(`downshift: A component has changed the uncontrolled prop "${propKey}" to be controlled. ${warningDescription}`);
       }
     });
   };
@@ -554,12 +554,12 @@ const Downshift = /*#__PURE__*/(() => {
 
       super(_props);
       _this = this;
-      this.id = this.props.id || "downshift-" + generateId();
-      this.menuId = this.props.menuId || this.id + "-menu";
-      this.labelId = this.props.labelId || this.id + "-label";
-      this.inputId = this.props.inputId || this.id + "-input";
+      this.id = this.props.id || `downshift-${generateId()}`;
+      this.menuId = this.props.menuId || `${this.id}-menu`;
+      this.labelId = this.props.labelId || `${this.id}-label`;
+      this.inputId = this.props.inputId || `${this.id}-input`;
 
-      this.getItemId = this.props.getItemId || (index => this.id + "-item-" + index);
+      this.getItemId = this.props.getItemId || (index => `${this.id}-item-${index}`);
 
       this.input = null;
       this.items = [];
@@ -1684,7 +1684,7 @@ function validateGetMenuPropsCalledCorrectly(node, _ref3) {
 
   if (!node) {
     // eslint-disable-next-line no-console
-    console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element.");
+    console.error(`downshift: The ref prop "${refKey}" from getMenuProps was not applied correctly on your menu element.`);
   }
 }
 
@@ -1700,12 +1700,12 @@ function validateGetRootPropsCalledCorrectly(element, _ref4) {
     console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
   } else if (!isComposite && refKeySpecified) {
     // eslint-disable-next-line no-console
-    console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\"");
+    console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "${refKey}"`);
   }
 
   if (!reactIs.isForwardRef(element) && !getElementProps(element)[refKey]) {
     // eslint-disable-next-line no-console
-    console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto your root element.");
+    console.error(`downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`);
   }
 }
 
@@ -1743,7 +1743,7 @@ function invokeOnChangeHandler(key, action, state, newState) {
     props,
     type
   } = action;
-  const handler = "on" + capitalizeString(key) + "Change";
+  const handler = `on${capitalizeString(key)}Change`;
 
   if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
     props[handler]({
@@ -1777,7 +1777,7 @@ function getA11ySelectionMessage(selectionParameters) {
     selectedItem,
     itemToString: itemToStringLocal
   } = selectionParameters;
-  return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+  return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
 }
 /**
  * Debounced call for updating the a11y message.
@@ -1792,7 +1792,7 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window
 
 function useElementIds(_ref) {
   let {
-    id = "downshift-" + generateId(),
+    id = `downshift-${generateId()}`,
     labelId,
     menuId,
     getItemId,
@@ -1800,11 +1800,11 @@ function useElementIds(_ref) {
     inputId
   } = _ref;
   const elementIdsRef = react.useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || (index => id + "-item-" + index),
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
+    labelId: labelId || `${id}-label`,
+    menuId: menuId || `${id}-menu`,
+    getItemId: getItemId || (index => `${id}-item-${index}`),
+    toggleButtonId: toggleButtonId || `${id}-toggle-button`,
+    inputId: inputId || `${id}-input`
   });
   return elementIdsRef.current;
 }
@@ -1830,7 +1830,7 @@ function isAcceptedCharacterKey(key) {
 }
 
 function capitalizeString(string) {
-  return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
+  return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
 }
 
 function useLatestRef(val) {
@@ -1915,10 +1915,10 @@ function getDefaultValue$1(props, propKey, defaultStateValues) {
     defaultStateValues = dropdownDefaultStateValues;
   }
 
-  const defaultPropKey = "default" + capitalizeString(propKey);
+  const defaultValue = props[`default${capitalizeString(propKey)}`];
 
-  if (defaultPropKey in props) {
-    return props[defaultPropKey];
+  if (defaultValue !== undefined) {
+    return defaultValue;
   }
 
   return defaultStateValues[propKey];
@@ -1929,14 +1929,16 @@ function getInitialValue$1(props, propKey, defaultStateValues) {
     defaultStateValues = dropdownDefaultStateValues;
   }
 
-  if (propKey in props) {
-    return props[propKey];
+  const value = props[propKey];
+
+  if (value !== undefined) {
+    return value;
   }
 
-  const initialPropKey = "initial" + capitalizeString(propKey);
+  const initialValue = props[`initial${capitalizeString(propKey)}`];
 
-  if (initialPropKey in props) {
-    return props[initialPropKey];
+  if (initialValue !== undefined) {
+    return initialValue;
   }
 
   return getDefaultValue$1(props, propKey, defaultStateValues);
@@ -2087,7 +2089,7 @@ if (process.env.NODE_ENV !== 'production') {
         if (isInitialMountRef.current) {
           if (!Object.keys(propCallInfo).length) {
             // eslint-disable-next-line no-console
-            console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
+            console.error(`downshift: You forgot to call the ${propKey} getter function on your component / element.`);
             return;
           }
         }
@@ -2100,7 +2102,7 @@ if (process.env.NODE_ENV !== 'production') {
 
         if ((!elementRef || !elementRef.current) && !suppressRefError) {
           // eslint-disable-next-line no-console
-          console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
+          console.error(`downshift: The ref prop "${refKey}" from ${propKey} was not applied correctly on your element.`);
         }
       });
       isInitialMountRef.current = false;
@@ -2421,7 +2423,7 @@ function downshiftSelectReducer(state, action) {
     case ToggleButtonKeyDownCharacter:
       {
         const lowercasedKey = action.key;
-        const inputValue = "" + state.inputValue + lowercasedKey;
+        const inputValue = `${state.inputValue}${lowercasedKey}`;
         const itemIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: state.selectedItem ? props.items.indexOf(state.selectedItem) : -1,
@@ -2492,7 +2494,7 @@ function downshiftSelectReducer(state, action) {
     case MenuKeyDownCharacter:
       {
         const lowercasedKey = action.key;
-        const inputValue = "" + state.inputValue + lowercasedKey;
+        const inputValue = `${state.inputValue}${lowercasedKey}`;
         const highlightedIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: state.highlightedIndex,
@@ -2931,7 +2933,7 @@ function useSelect(userProps) {
       id: elementIds.toggleButtonId,
       'aria-haspopup': 'listbox',
       'aria-expanded': latest.current.state.isOpen,
-      'aria-labelledby': elementIds.labelId + " " + elementIds.toggleButtonId,
+      'aria-labelledby': `${elementIds.labelId} ${elementIds.toggleButtonId}`,
       ...rest
     };
 
@@ -2985,7 +2987,7 @@ function useSelect(userProps) {
 
     const itemProps = {
       role: 'option',
-      'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+      'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
       id: elementIds.getItemId(itemIndex),
       [refKey]: handleRefs(ref, itemNode => {
         if (itemNode) {
@@ -3458,10 +3460,11 @@ function useCombobox(userProps) {
       });
     },
 
-    Escape() {
+    Escape(event) {
       const latestState = latest.current.state;
 
       if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
+        event.stopPropagation();
         dispatch({
           type: InputKeyDownEscape
         });
@@ -3570,7 +3573,7 @@ function useCombobox(userProps) {
         }
       }),
       role: 'option',
-      'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+      'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
       id: elementIds.getItemId(itemIndex),
       ...(!rest.disabled && {
         onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
@@ -3856,7 +3859,7 @@ function getA11yRemovalMessage(selectionParameters) {
     removedSelectedItem,
     itemToString: itemToStringLocal
   } = selectionParameters;
-  return itemToStringLocal(removedSelectedItem) + " has been removed.";
+  return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
 }
 
 const propTypes = {

package/dist/downshift.esm.js

@@ -179,7 +179,7 @@ function getA11yStatusMessage$1(_ref2) {
   }
 
   if (resultCount !== previousResultCount) {
-    return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select.";
+    return `${resultCount} result${resultCount === 1 ? ' is' : 's are'} available, use up and down arrow keys to navigate. Press Enter key to select.`;
   }
 
   return '';
@@ -235,7 +235,7 @@ function getElementProps(element) {
 
 function requiredProp(fnName, propName) {
   // eslint-disable-next-line no-console
-  console.error("The property \"" + propName + "\" is required in \"" + fnName + "\"");
+  console.error(`The property "${propName}" is required in "${fnName}"`);
 }
 
 const stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
@@ -305,7 +305,7 @@ function normalizeArrowKey(event) {
   /* istanbul ignore next (ie) */
 
   if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
-    return "Arrow" + key;
+    return `Arrow${key}`;
   }
 
   return key;
@@ -429,14 +429,14 @@ let validateControlledUnchanged = noop;
 
 if (process.env.NODE_ENV !== 'production') {
   validateControlledUnchanged = (state, prevProps, nextProps) => {
-    const warningDescription = "This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props";
+    const warningDescription = `This prop should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Downshift element for the lifetime of the component. More info: https://github.com/downshift-js/downshift#control-props`;
     Object.keys(state).forEach(propKey => {
       if (prevProps[propKey] !== undefined && nextProps[propKey] === undefined) {
         // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the controlled prop \"" + propKey + "\" to be uncontrolled. " + warningDescription);
+        console.error(`downshift: A component has changed the controlled prop "${propKey}" to be uncontrolled. ${warningDescription}`);
       } else if (prevProps[propKey] === undefined && nextProps[propKey] !== undefined) {
         // eslint-disable-next-line no-console
-        console.error("downshift: A component has changed the uncontrolled prop \"" + propKey + "\" to be controlled. " + warningDescription);
+        console.error(`downshift: A component has changed the uncontrolled prop "${propKey}" to be controlled. ${warningDescription}`);
       }
     });
   };
@@ -545,12 +545,12 @@ const Downshift = /*#__PURE__*/(() => {
 
       super(_props);
       _this = this;
-      this.id = this.props.id || "downshift-" + generateId();
-      this.menuId = this.props.menuId || this.id + "-menu";
-      this.labelId = this.props.labelId || this.id + "-label";
-      this.inputId = this.props.inputId || this.id + "-input";
+      this.id = this.props.id || `downshift-${generateId()}`;
+      this.menuId = this.props.menuId || `${this.id}-menu`;
+      this.labelId = this.props.labelId || `${this.id}-label`;
+      this.inputId = this.props.inputId || `${this.id}-input`;
 
-      this.getItemId = this.props.getItemId || (index => this.id + "-item-" + index);
+      this.getItemId = this.props.getItemId || (index => `${this.id}-item-${index}`);
 
       this.input = null;
       this.items = [];
@@ -1675,7 +1675,7 @@ function validateGetMenuPropsCalledCorrectly(node, _ref3) {
 
   if (!node) {
     // eslint-disable-next-line no-console
-    console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element.");
+    console.error(`downshift: The ref prop "${refKey}" from getMenuProps was not applied correctly on your menu element.`);
   }
 }
 
@@ -1691,12 +1691,12 @@ function validateGetRootPropsCalledCorrectly(element, _ref4) {
     console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
   } else if (!isComposite && refKeySpecified) {
     // eslint-disable-next-line no-console
-    console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\"");
+    console.error(`downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "${refKey}"`);
   }
 
   if (!isForwardRef(element) && !getElementProps(element)[refKey]) {
     // eslint-disable-next-line no-console
-    console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto your root element.");
+    console.error(`downshift: You must apply the ref prop "${refKey}" from getRootProps onto your root element.`);
   }
 }
 
@@ -1734,7 +1734,7 @@ function invokeOnChangeHandler(key, action, state, newState) {
     props,
     type
   } = action;
-  const handler = "on" + capitalizeString(key) + "Change";
+  const handler = `on${capitalizeString(key)}Change`;
 
   if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) {
     props[handler]({
@@ -1768,7 +1768,7 @@ function getA11ySelectionMessage(selectionParameters) {
     selectedItem,
     itemToString: itemToStringLocal
   } = selectionParameters;
-  return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : '';
+  return selectedItem ? `${itemToStringLocal(selectedItem)} has been selected.` : '';
 }
 /**
  * Debounced call for updating the a11y message.
@@ -1783,7 +1783,7 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window
 
 function useElementIds(_ref) {
   let {
-    id = "downshift-" + generateId(),
+    id = `downshift-${generateId()}`,
     labelId,
     menuId,
     getItemId,
@@ -1791,11 +1791,11 @@ function useElementIds(_ref) {
     inputId
   } = _ref;
   const elementIdsRef = useRef({
-    labelId: labelId || id + "-label",
-    menuId: menuId || id + "-menu",
-    getItemId: getItemId || (index => id + "-item-" + index),
-    toggleButtonId: toggleButtonId || id + "-toggle-button",
-    inputId: inputId || id + "-input"
+    labelId: labelId || `${id}-label`,
+    menuId: menuId || `${id}-menu`,
+    getItemId: getItemId || (index => `${id}-item-${index}`),
+    toggleButtonId: toggleButtonId || `${id}-toggle-button`,
+    inputId: inputId || `${id}-input`
   });
   return elementIdsRef.current;
 }
@@ -1821,7 +1821,7 @@ function isAcceptedCharacterKey(key) {
 }
 
 function capitalizeString(string) {
-  return "" + string.slice(0, 1).toUpperCase() + string.slice(1);
+  return `${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;
 }
 
 function useLatestRef(val) {
@@ -1906,10 +1906,10 @@ function getDefaultValue$1(props, propKey, defaultStateValues) {
     defaultStateValues = dropdownDefaultStateValues;
   }
 
-  const defaultPropKey = "default" + capitalizeString(propKey);
+  const defaultValue = props[`default${capitalizeString(propKey)}`];
 
-  if (defaultPropKey in props) {
-    return props[defaultPropKey];
+  if (defaultValue !== undefined) {
+    return defaultValue;
   }
 
   return defaultStateValues[propKey];
@@ -1920,14 +1920,16 @@ function getInitialValue$1(props, propKey, defaultStateValues) {
     defaultStateValues = dropdownDefaultStateValues;
   }
 
-  if (propKey in props) {
-    return props[propKey];
+  const value = props[propKey];
+
+  if (value !== undefined) {
+    return value;
   }
 
-  const initialPropKey = "initial" + capitalizeString(propKey);
+  const initialValue = props[`initial${capitalizeString(propKey)}`];
 
-  if (initialPropKey in props) {
-    return props[initialPropKey];
+  if (initialValue !== undefined) {
+    return initialValue;
   }
 
   return getDefaultValue$1(props, propKey, defaultStateValues);
@@ -2078,7 +2080,7 @@ if (process.env.NODE_ENV !== 'production') {
         if (isInitialMountRef.current) {
           if (!Object.keys(propCallInfo).length) {
             // eslint-disable-next-line no-console
-            console.error("downshift: You forgot to call the " + propKey + " getter function on your component / element.");
+            console.error(`downshift: You forgot to call the ${propKey} getter function on your component / element.`);
             return;
           }
         }
@@ -2091,7 +2093,7 @@ if (process.env.NODE_ENV !== 'production') {
 
         if ((!elementRef || !elementRef.current) && !suppressRefError) {
           // eslint-disable-next-line no-console
-          console.error("downshift: The ref prop \"" + refKey + "\" from " + propKey + " was not applied correctly on your element.");
+          console.error(`downshift: The ref prop "${refKey}" from ${propKey} was not applied correctly on your element.`);
         }
       });
       isInitialMountRef.current = false;
@@ -2412,7 +2414,7 @@ function downshiftSelectReducer(state, action) {
     case ToggleButtonKeyDownCharacter:
       {
         const lowercasedKey = action.key;
-        const inputValue = "" + state.inputValue + lowercasedKey;
+        const inputValue = `${state.inputValue}${lowercasedKey}`;
         const itemIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: state.selectedItem ? props.items.indexOf(state.selectedItem) : -1,
@@ -2483,7 +2485,7 @@ function downshiftSelectReducer(state, action) {
     case MenuKeyDownCharacter:
       {
         const lowercasedKey = action.key;
-        const inputValue = "" + state.inputValue + lowercasedKey;
+        const inputValue = `${state.inputValue}${lowercasedKey}`;
         const highlightedIndex = getItemIndexByCharacterKey({
           keysSoFar: inputValue,
           highlightedIndex: state.highlightedIndex,
@@ -2922,7 +2924,7 @@ function useSelect(userProps) {
       id: elementIds.toggleButtonId,
       'aria-haspopup': 'listbox',
       'aria-expanded': latest.current.state.isOpen,
-      'aria-labelledby': elementIds.labelId + " " + elementIds.toggleButtonId,
+      'aria-labelledby': `${elementIds.labelId} ${elementIds.toggleButtonId}`,
       ...rest
     };
 
@@ -2976,7 +2978,7 @@ function useSelect(userProps) {
 
     const itemProps = {
       role: 'option',
-      'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+      'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
       id: elementIds.getItemId(itemIndex),
       [refKey]: handleRefs(ref, itemNode => {
         if (itemNode) {
@@ -3449,10 +3451,11 @@ function useCombobox(userProps) {
       });
     },
 
-    Escape() {
+    Escape(event) {
       const latestState = latest.current.state;
 
       if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) {
+        event.stopPropagation();
         dispatch({
           type: InputKeyDownEscape
         });
@@ -3561,7 +3564,7 @@ function useCombobox(userProps) {
         }
       }),
       role: 'option',
-      'aria-selected': "" + (itemIndex === latestState.highlightedIndex),
+      'aria-selected': `${itemIndex === latestState.highlightedIndex}`,
       id: elementIds.getItemId(itemIndex),
       ...(!rest.disabled && {
         onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove),
@@ -3847,7 +3850,7 @@ function getA11yRemovalMessage(selectionParameters) {
     removedSelectedItem,
     itemToString: itemToStringLocal
   } = selectionParameters;
-  return itemToStringLocal(removedSelectedItem) + " has been removed.";
+  return `${itemToStringLocal(removedSelectedItem)} has been removed.`;
 }
 
 const propTypes = {