From ad5794351122f65da5bacdd3852c0c75dfccf262 Mon Sep 17 00:00:00 2001 From: hasanozacar <50142554+hasanozacar@users.noreply.github.com> Date: Fri, 21 Feb 2020 12:53:01 +0300 Subject: [PATCH 1/6] Fix issues #19778 --- packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 9957ed76d7b23c..ca7bcfd4c714be 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -405,6 +405,7 @@ export default function useAutocomplete(props) { onOpen(event); } if (!isOpenControlled) { + focusTag(-1); setOpenState(true); } }; From ef1fa81ffef1ba46f6589f6ff276f42292bf4368 Mon Sep 17 00:00:00 2001 From: hasanozacar <50142554+hasanozacar@users.noreply.github.com> Date: Fri, 21 Feb 2020 15:11:24 +0300 Subject: [PATCH 2/6] Set focus of textfield --- .../src/useAutocomplete/useAutocomplete.js | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index ca7bcfd4c714be..f6b2bc50d8e8cd 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -256,21 +256,21 @@ export default function useAutocomplete(props) { const filteredOptions = popupOpen ? filterOptions( - options.filter(option => { - if ( - filterSelectedOptions && - (multiple ? value : [value]).some( - value2 => value2 !== null && getOptionSelected(option, value2), - ) - ) { - return false; - } - return true; - }), - // we use the empty string to manipulate `filterOptions` to not filter any options - // i.e. the filter predicate always returns true - { inputValue: inputValueIsSelectedValue ? '' : inputValue }, - ) + options.filter(option => { + if ( + filterSelectedOptions && + (multiple ? value : [value]).some( + value2 => value2 !== null && getOptionSelected(option, value2), + ) + ) { + return false; + } + return true; + }), + // we use the empty string to manipulate `filterOptions` to not filter any options + // i.e. the filter predicate always returns true + { inputValue: inputValueIsSelectedValue ? '' : inputValue }, + ) : []; popupOpen = freeSolo && filteredOptions.length === 0 ? false : popupOpen; @@ -405,6 +405,7 @@ export default function useAutocomplete(props) { onOpen(event); } if (!isOpenControlled) { + setFocusedTag(-1); focusTag(-1); setOpenState(true); } @@ -448,7 +449,7 @@ export default function useAutocomplete(props) { [ 'Material-UI: the `getOptionSelected` method of useAutocomplete do not handle the arguments correctly.', `The component expects a single value to match a given option but found ${ - matches.length + matches.length } matches.`, ].join('\n'), ); From 9b4635e104326ea88c6bd33e44d203442f021eef Mon Sep 17 00:00:00 2001 From: hasanozacar <50142554+hasanozacar@users.noreply.github.com> Date: Fri, 21 Feb 2020 15:33:25 +0300 Subject: [PATCH 3/6] change --- packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index f6b2bc50d8e8cd..aa15444c18bee1 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -405,8 +405,6 @@ export default function useAutocomplete(props) { onOpen(event); } if (!isOpenControlled) { - setFocusedTag(-1); - focusTag(-1); setOpenState(true); } }; From 4443a3f2978cd2dda9c982db2c3c32c00f15532c Mon Sep 17 00:00:00 2001 From: hasanozacar <50142554+hasanozacar@users.noreply.github.com> Date: Fri, 21 Feb 2020 15:49:46 +0300 Subject: [PATCH 4/6] fix bug --- .../src/useAutocomplete/useAutocomplete.js | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index aa15444c18bee1..9ba72b4af51ddf 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -256,21 +256,21 @@ export default function useAutocomplete(props) { const filteredOptions = popupOpen ? filterOptions( - options.filter(option => { - if ( - filterSelectedOptions && - (multiple ? value : [value]).some( - value2 => value2 !== null && getOptionSelected(option, value2), - ) - ) { - return false; - } - return true; - }), - // we use the empty string to manipulate `filterOptions` to not filter any options - // i.e. the filter predicate always returns true - { inputValue: inputValueIsSelectedValue ? '' : inputValue }, - ) + options.filter(option => { + if ( + filterSelectedOptions && + (multiple ? value : [value]).some( + value2 => value2 !== null && getOptionSelected(option, value2), + ) + ) { + return false; + } + return true; + }), + // we use the empty string to manipulate `filterOptions` to not filter any options + // i.e. the filter predicate always returns true + { inputValue: inputValueIsSelectedValue ? '' : inputValue }, + ) : []; popupOpen = freeSolo && filteredOptions.length === 0 ? false : popupOpen; @@ -405,6 +405,7 @@ export default function useAutocomplete(props) { onOpen(event); } if (!isOpenControlled) { + inputRef.current.focus(); setOpenState(true); } }; @@ -447,7 +448,7 @@ export default function useAutocomplete(props) { [ 'Material-UI: the `getOptionSelected` method of useAutocomplete do not handle the arguments correctly.', `The component expects a single value to match a given option but found ${ - matches.length + matches.length } matches.`, ].join('\n'), ); From 9d73c310af9333a832025bbc1fdbf1700191a18d Mon Sep 17 00:00:00 2001 From: hasanozacar <50142554+hasanozacar@users.noreply.github.com> Date: Fri, 21 Feb 2020 16:49:27 +0300 Subject: [PATCH 5/6] fix bug --- packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 9ba72b4af51ddf..19cea91d781932 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -558,6 +558,7 @@ export default function useAutocomplete(props) { // Prevent scroll of the page event.preventDefault(); changeHighlightedIndex('start', 'next'); + handleOpen(event); } break; case 'End': @@ -565,6 +566,7 @@ export default function useAutocomplete(props) { // Prevent scroll of the page event.preventDefault(); changeHighlightedIndex('end', 'previous'); + handleOpen(event); } break; case 'PageUp': From 6ffdfedc4b41fa9a48270940815070af5d0a1f8c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 22 Feb 2020 13:12:10 +0100 Subject: [PATCH 6/6] add regression test --- .../src/Autocomplete/Autocomplete.test.js | 28 +++++++++++++++---- .../src/useAutocomplete/useAutocomplete.js | 19 ++++++------- 2 files changed, 30 insertions(+), 17 deletions(-) diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index bd9dc472f94d34..bf6f017c9cd1ab 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -913,6 +913,25 @@ describe('', () => { expect(textbox.selectionStart).to.equal(0); expect(textbox.selectionEnd).to.equal(3); }); + + it('should focus the input when clicking on the open action', () => { + const { getByRole, queryByTitle } = render( + } + />, + ); + + const textbox = getByRole('textbox'); + fireEvent.click(textbox); + expect(textbox).to.have.focus; + textbox.blur(); + + fireEvent.click(queryByTitle('Open')); + expect(textbox).to.have.focus; + }); }); describe('controlled', () => { @@ -1141,8 +1160,7 @@ describe('', () => { fireEvent.click(firstOption); expect(textbox).to.not.have.focus; - const opener = queryByTitle('Open'); - fireEvent.click(opener); + fireEvent.click(queryByTitle('Open')); expect(textbox).to.have.focus; firstOption = getByRole('option'); fireEvent.touchStart(firstOption); @@ -1166,8 +1184,7 @@ describe('', () => { fireEvent.click(firstOption); expect(textbox).to.have.focus; - const opener = queryByTitle('Open'); - fireEvent.click(opener); + fireEvent.click(queryByTitle('Open')); firstOption = getByRole('option'); fireEvent.touchStart(firstOption); fireEvent.click(firstOption); @@ -1191,8 +1208,7 @@ describe('', () => { fireEvent.click(firstOption); expect(textbox).to.have.focus; - const opener = queryByTitle('Open'); - fireEvent.click(opener); + fireEvent.click(queryByTitle('Open')); firstOption = getByRole('option'); fireEvent.click(firstOption); expect(textbox).to.not.have.focus; diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 19cea91d781932..3c01bb4b3d7a5d 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -1,7 +1,7 @@ /* eslint-disable no-constant-condition */ import React from 'react'; import PropTypes from 'prop-types'; -import { setRef, useEventCallback, useControlled } from '@material-ui/core/utils'; +import { setRef, useEventCallback, useControlled, ownerDocument } from '@material-ui/core/utils'; // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript // Give up on IE 11 support for this feature @@ -405,7 +405,6 @@ export default function useAutocomplete(props) { onOpen(event); } if (!isOpenControlled) { - inputRef.current.focus(); setOpenState(true); } }; @@ -558,7 +557,6 @@ export default function useAutocomplete(props) { // Prevent scroll of the page event.preventDefault(); changeHighlightedIndex('start', 'next'); - handleOpen(event); } break; case 'End': @@ -566,7 +564,6 @@ export default function useAutocomplete(props) { // Prevent scroll of the page event.preventDefault(); changeHighlightedIndex('end', 'previous'); - handleOpen(event); } break; case 'PageUp': @@ -770,24 +767,24 @@ export default function useAutocomplete(props) { } }; - // Focus the input when first interacting with the combobox + // Focus the input when interacting with the combobox const handleClick = () => { + inputRef.current.focus(); + if ( + selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0 ) { - inputRef.current.focus(); - - if (selectOnFocus) { - inputRef.current.select(); - } + inputRef.current.select(); } firstFocus.current = false; }; const handleInputMouseDown = event => { - if (inputValue === '' && (!disableOpenOnFocus || inputRef.current === document.activeElement)) { + const doc = ownerDocument(inputRef.current); + if (inputValue === '' && (!disableOpenOnFocus || inputRef.current === doc.activeElement)) { handlePopupIndicator(event); } };