Material-ui: [Autocomplete] clearOnEscape causes exit from fullscreen

Created on 30 Oct 2019  路  3Comments  路  Source: mui-org/material-ui

  • [x] The issue is present in the latest release.
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 馃槸

When I'm testing the clearOnEscape variation of the Autocomplete component on docs and pressing escape causes the browser to exit from fullscreen

Expected Behavior 馃

The browser state should not be affected by pressing escape

Steps to Reproduce 馃暪

  • Codesandox
  • Select any option
  • Press escape to clear the value

Your Environment 馃寧

| Tech | Version |
| ----------- | ------- |
| Material-UI |current聽master|
| Browser| Opera v63.0.3368.107 |
| OS| macOs Mojave 10.14.6|

bug 馃悰 Autocomplete good first issue

Most helpful comment

@oliviertassinari working on this

All 3 comments

How do you trigger the "fullscreen" mode?

Browser | Opera v63.0.3368.107

Notice that we have no official support for this browser.

What do you think of a fix like this one?

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index bc02f10f1..2df5b1c6f 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -513,9 +513,15 @@ export default function useAutocomplete(props) {
         break;
       case 'Escape':
         if (popupOpen) {
+          // Avoid Opera to exit fullscreen mode.
+          event.preventDefault();
+          // Avoid the Modal to handle the event.
           event.stopPropagation();
           handleClose(event);
-        } else if (clearOnEscape) {
+        } else if (clearOnEscape && inputValue !== '') {
+          // Avoid Opera to exit fullscreen mode.
+          event.preventDefault();
+          // Avoid the Modal to handle the event.
           event.stopPropagation();
           handleClear(event);
         }

@oliviertassinari working on this

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mattmiddlesworth picture mattmiddlesworth  路  3Comments

pola88 picture pola88  路  3Comments

mb-copart picture mb-copart  路  3Comments

revskill10 picture revskill10  路  3Comments

FranBran picture FranBran  路  3Comments