[Autocomplete] Fix blurOnSelect consistency for keyboard (#20314)

mui · Mar 29, 2020 · 35f9143 · 35f9143
1 parent d596401
commit 35f9143
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js
@@ -108,6 +108,12 @@ export default function Playground() {
  disablePortal
  renderInput={(params) => <TextField {...params} label="disablePortal" margin="normal" />}
  />
+ <Autocomplete
+ {...defaultProps}
+ id="blur-on-select"
+ blurOnSelect
+ renderInput={(params) => <TextField {...params} label="blurOnSelect" margin="normal" />}
+ />
  </div>
  );
 }

diff --git a/docs/src/pages/components/autocomplete/Playground.tsx b/docs/src/pages/components/autocomplete/Playground.tsx
@@ -106,6 +106,12 @@ export default function Playground() {
  disablePortal
  renderInput={(params) => <TextField {...params} label="disablePortal" margin="normal" />}
  />
+ <Autocomplete
+ {...defaultProps}
+ id="blur-on-select"
+ blurOnSelect
+ renderInput={(params) => <TextField {...params} label="blurOnSelect" margin="normal" />}
+ />
  </div>
  );
 }

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -490,6 +490,8 @@ export default function useAutocomplete(props) {
  setValue(newValue);
  };
 
+ const isTouch = React.useRef(false);
+
  const selectNewValue = (event, option, reasonProp = 'select-option', origin = 'options') => {
  let reason = reasonProp;
  let newValue = option;
@@ -526,6 +528,14 @@ export default function useAutocomplete(props) {
  if (!disableCloseOnSelect) {
  handleClose(event, reason);
  }
+
+ if (
+ blurOnSelect === true ||
+ (blurOnSelect === 'touch' && isTouch.current) ||
+ (blurOnSelect === 'mouse' && !isTouch.current)
+ ) {
+ inputRef.current.blur();
+ }
  };
 
  function validTagIndex(index, direction) {
@@ -780,8 +790,6 @@ export default function useAutocomplete(props) {
  setHighlightedIndex(index, 'mouse');
  };
 
- const isTouch = React.useRef(false);
-
  const handleOptionTouchStart = () => {
  isTouch.current = true;
  };
@@ -790,14 +798,6 @@ export default function useAutocomplete(props) {
  const index = Number(event.currentTarget.getAttribute('data-option-index'));
  selectNewValue(event, filteredOptions[index], 'select-option');
 
- if (
- blurOnSelect === true ||
- (blurOnSelect === 'touch' && isTouch.current) ||
- (blurOnSelect === 'mouse' && !isTouch.current)
- ) {
- inputRef.current.blur();
- }
-
  isTouch.current = false;
  };