@@ -499,7 +470,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
inputProps: {
className: clsx(classes.input, {
[classes.inputFocused]: focusedTag === -1,
- [classes.inputDisabled]: readOnly,
}),
disabled,
...getInputProps(),
@@ -531,7 +501,18 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
{...getListboxProps()}
{...ListboxProps}
>
- {allGroupedOptions}
+ {groupedOptions.map((option, index) => {
+ if (groupBy) {
+ return renderGroup({
+ key: option.key,
+ group: option.group,
+ children: option.options.map((option2, index2) =>
+ renderListOption(option2, option.index + index2),
+ ),
+ });
+ }
+ return renderListOption(option, index);
+ })}
) : null}
@@ -863,11 +844,6 @@ Autocomplete.propTypes = {
* @default
*/
popupIcon: PropTypes.node,
- /**
- * If `true`, the input is and search functionality disabled, but s still consistently styled.
- * @default false
- */
- readOnly: PropTypes.bool,
/**
* Render the group.
*
diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.test.js b/packages/material-ui/src/Autocomplete/Autocomplete.test.js
index 74f307679ea8ba..92a2ce6ebf9e45 100644
--- a/packages/material-ui/src/Autocomplete/Autocomplete.test.js
+++ b/packages/material-ui/src/Autocomplete/Autocomplete.test.js
@@ -17,9 +17,9 @@ import Autocomplete from './Autocomplete';
function checkHighlightIs(listbox, expected) {
if (expected) {
- expect(listbox.querySelector('li.Mui-focused')).to.have.text(expected);
+ expect(listbox.querySelector('li[data-focus]')).to.have.text(expected);
} else {
- expect(listbox.querySelector('li.Mui-focused')).to.equal(null);
+ expect(listbox.querySelector('li[data-focus]')).to.equal(null);
}
}
@@ -328,12 +328,12 @@ describe('
', () => {
it('should add new value when autoSelect & multiple on blur', () => {
const handleChange = spy();
- const options = ['one', 'two', 'three'];
+ const options = ['one', 'two'];
render(
', () => {
/>,
);
const textbox = screen.getByRole('textbox');
- fireEvent.change(textbox, { target: { value: 't' } });
- fireEvent.keyDown(textbox, { key: 'ArrowDown' });
act(() => {
+ fireEvent.change(textbox, { target: { value: 't' } });
+ fireEvent.keyDown(textbox, { key: 'ArrowDown' });
textbox.blur();
});
expect(handleChange.callCount).to.equal(1);
- expect(handleChange.args[0][1]).to.deep.equal(['one', 'two']);
+ expect(handleChange.args[0][1]).to.deep.equal(options);
});
it('should add new value when autoSelect & multiple & freeSolo on blur', () => {
@@ -533,7 +533,6 @@ describe('
', () => {
it('should trigger a form expectedly', () => {
const handleSubmit = spy();
-
const { setProps } = render(
', () => {
renderInput={(props2) =>
}
/>,
);
-
let textbox = screen.getByRole('textbox');
fireEvent.keyDown(textbox, { key: 'Enter' });
expect(handleSubmit.callCount).to.equal(1);
+ fireEvent.change(textbox, { target: { value: 'o' } });
+ fireEvent.keyDown(textbox, { key: 'ArrowDown' });
+ fireEvent.keyDown(textbox, { key: 'Enter' });
+ expect(handleSubmit.callCount).to.equal(1);
+
fireEvent.keyDown(textbox, { key: 'Enter' });
expect(handleSubmit.callCount).to.equal(2);
- expect(() => {
- setProps({ key: 'test-2', multiple: true, freeSolo: true });
- textbox = screen.getByRole('textbox');
+ setProps({ key: 'test-2', multiple: true, freeSolo: true });
+ textbox = screen.getByRole('textbox');
- fireEvent.change(textbox, { target: { value: 'o' } });
- fireEvent.keyDown(textbox, { key: 'Enter' });
- expect(handleSubmit.callCount).to.equal(2);
+ fireEvent.change(textbox, { target: { value: 'o' } });
+ fireEvent.keyDown(textbox, { key: 'Enter' });
+ expect(handleSubmit.callCount).to.equal(2);
- fireEvent.keyDown(textbox, { key: 'Enter' });
- expect(handleSubmit.callCount).to.equal(3);
- }).not.toErrorDev();
+ fireEvent.keyDown(textbox, { key: 'Enter' });
+ expect(handleSubmit.callCount).to.equal(3);
- expect(() => {
- setProps({ key: 'test-3', freeSolo: true });
- textbox = screen.getByRole('textbox');
- fireEvent.change(textbox, { target: { value: 'o' } });
- fireEvent.keyDown(textbox, { key: 'Enter' });
- expect(handleSubmit.callCount).to.equal(4);
- }).not.toErrorDev();
+ setProps({ key: 'test-3', freeSolo: true });
+ textbox = screen.getByRole('textbox');
+
+ fireEvent.change(textbox, { target: { value: 'o' } });
+ fireEvent.keyDown(textbox, { key: 'Enter' });
+ expect(handleSubmit.callCount).to.equal(4);
});
describe('prop: getOptionDisabled', () => {
@@ -1151,26 +1151,6 @@ describe('
', () => {
});
});
- describe('prop: readOnly', () => {
- it('should render inputDisabled class', () => {
- const handleChange = spy();
- const options = ['one', 'two', 'three'];
- render(
-
}
- />,
- );
- const textbox = screen.getByRole('textbox');
- fireEvent.click(textbox);
- expect(handleChange.callCount).to.equal(0);
- expect(textbox).toHaveFocus();
- expect(textbox).to.have.class(classes.inputDisabled);
- });
- });
-
describe('warnings', () => {
it('warn if getOptionLabel do not return a string', () => {
const handleChange = spy();
@@ -1272,8 +1252,6 @@ describe('', () => {
/>,
);
}).toWarnDev([
- `Material-UI: The options provided combined with the \`groupBy\` method of Autocomplete returns duplicated headers.`,
- 'You can solve the issue by sorting the options with the output of `groupBy`.',
// strict mode renders twice
'returns duplicated headers',
'returns duplicated headers',
@@ -1424,15 +1402,17 @@ describe('', () => {
const textbox = screen.getByRole('textbox');
fireEvent.change(document.activeElement, { target: { value: 'O' } });
+
expect(document.activeElement.value).to.equal('O');
fireEvent.keyDown(textbox, { key: 'ArrowDown' });
- fireEvent.change(document.activeElement, { target: { value: 'one' } });
+
expect(document.activeElement.value).to.equal('one');
- expect(document.activeElement.selectionStart).to.equal(3);
+ expect(document.activeElement.selectionStart).to.equal(1);
expect(document.activeElement.selectionEnd).to.equal(3);
fireEvent.keyDown(textbox, { key: 'Enter' });
+
expect(document.activeElement.value).to.equal('one');
expect(document.activeElement.selectionStart).to.equal(3);
expect(document.activeElement.selectionEnd).to.equal(3);
diff --git a/packages/material-ui/src/PaginationItem/PaginationItem.js b/packages/material-ui/src/PaginationItem/PaginationItem.js
index d7a5f593d61d9e..182fbe620e8de7 100644
--- a/packages/material-ui/src/PaginationItem/PaginationItem.js
+++ b/packages/material-ui/src/PaginationItem/PaginationItem.js
@@ -1,7 +1,8 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
-import { alpha, useTheme, withStyles, useThemeVariants } from '../styles';
+import { useTheme, withStyles, useThemeVariants } from '../styles';
+import { alpha } from '../styles/colorManipulator';
import ButtonBase from '../ButtonBase';
import { capitalize } from '../utils';
import FirstPageIcon from '../internal/svg-icons/FirstPage';
@@ -34,6 +35,9 @@ export const styles = (theme) => ({
backgroundColor: 'transparent',
},
},
+ '&$disabled': {
+ opacity: theme.palette.action.disabledOpacity,
+ },
'&$focusVisible': {
backgroundColor: theme.palette.action.focus,
},
@@ -61,9 +65,6 @@ export const styles = (theme) => ({
backgroundColor: theme.palette.action.selected,
},
},
- '&$disabled': {
- opacity: theme.palette.action.disabledOpacity,
- },
},
/* Styles applied applied to the root element if `size="small"`. */
sizeSmall: {
diff --git a/packages/material-ui/src/useAutocomplete/useAutocomplete.js b/packages/material-ui/src/useAutocomplete/useAutocomplete.js
index a588251a705c02..7e7598f853c67f 100644
--- a/packages/material-ui/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui/src/useAutocomplete/useAutocomplete.js
@@ -74,7 +74,6 @@ export default function useAutocomplete(props) {
defaultValue = props.multiple ? [] : null,
disableClearable = false,
disableCloseOnSelect = false,
- readOnly = false,
disabledItemsFocusable = false,
disableListWrap = false,
filterOptions = defaultFilterOptions,
@@ -129,7 +128,7 @@ export default function useAutocomplete(props) {
const [focusedTag, setFocusedTag] = React.useState(-1);
const defaultHighlighted = autoHighlight ? 0 : -1;
- const [highlightedOptionIndex, setHighlightedOptionIndex] = React.useState(defaultHighlighted);
+ const highlightedIndexRef = React.useRef(defaultHighlighted);
const [value, setValueState] = useControlled({
controlled: valueProp,
@@ -280,7 +279,7 @@ export default function useAutocomplete(props) {
}
const setHighlightedIndex = useEventCallback(({ event, index, reason = 'auto' }) => {
- setHighlightedOptionIndex(index);
+ highlightedIndexRef.current = index;
// does the index exist?
if (index === -1) {
@@ -298,9 +297,9 @@ export default function useAutocomplete(props) {
}
const prev = listboxRef.current.querySelector('[data-focus]');
-
if (prev) {
prev.removeAttribute('data-focus');
+ prev.classList.remove('Mui-focusVisible');
}
const listboxNode = listboxRef.current.parentElement.querySelector('[role="listbox"]');
@@ -322,6 +321,9 @@ export default function useAutocomplete(props) {
}
option.setAttribute('data-focus', 'true');
+ if (reason === 'keyboard') {
+ option.classList.add('Mui-focusVisible');
+ }
// Scroll active descendant into view.
// Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
@@ -365,14 +367,14 @@ export default function useAutocomplete(props) {
return maxIndex;
}
- const newIndex = highlightedOptionIndex + diff;
+ const newIndex = highlightedIndexRef.current + diff;
if (newIndex < 0) {
if (newIndex === -1 && includeInputInList) {
return -1;
}
- if ((disableListWrap && highlightedOptionIndex !== -1) || Math.abs(diff) > 1) {
+ if ((disableListWrap && highlightedIndexRef.current !== -1) || Math.abs(diff) > 1) {
return 0;
}
@@ -435,7 +437,7 @@ export default function useAutocomplete(props) {
// Synchronize the value with the highlighted index
if (valueItem != null) {
- const currentOption = filteredOptions[highlightedOptionIndex];
+ const currentOption = filteredOptions[highlightedIndexRef.current];
// Keep the current highlighted index if possible
if (
@@ -458,13 +460,13 @@ export default function useAutocomplete(props) {
}
// Prevent the highlighted index to leak outside the boundaries.
- if (highlightedOptionIndex >= filteredOptions.length - 1) {
+ if (highlightedIndexRef.current >= filteredOptions.length - 1) {
setHighlightedIndex({ index: filteredOptions.length - 1 });
return;
}
// Restore the focus to the previous index.
- setHighlightedIndex({ index: highlightedOptionIndex });
+ setHighlightedIndex({ index: highlightedIndexRef.current });
// Ignore filteredOptions (and options, getOptionSelected, getOptionLabel) not to break the scroll position
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
@@ -719,8 +721,8 @@ export default function useAutocomplete(props) {
handleFocusTag(event, 'next');
break;
case 'Enter':
- if (highlightedOptionIndex !== -1 && popupOpen) {
- const option = filteredOptions[highlightedOptionIndex];
+ if (highlightedIndexRef.current !== -1 && popupOpen) {
+ const option = filteredOptions[highlightedIndexRef.current];
const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
// We don't want to validate the form.
@@ -807,8 +809,8 @@ export default function useAutocomplete(props) {
return;
}
- if (autoSelect && highlightedOptionIndex !== -1 && popupOpen) {
- selectNewValue(event, filteredOptions[highlightedOptionIndex], 'blur');
+ if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {
+ selectNewValue(event, filteredOptions[highlightedIndexRef.current], 'blur');
} else if (autoSelect && freeSolo && inputValue !== '') {
selectNewValue(event, inputValue, 'blur', 'freeSolo');
} else if (clearOnBlur) {
@@ -820,7 +822,6 @@ export default function useAutocomplete(props) {
const handleInputChange = (event) => {
const newValue = event.target.value;
- if (readOnly) return;
if (inputValue !== newValue) {
setInputValueState(newValue);
@@ -1005,8 +1006,7 @@ export default function useAutocomplete(props) {
const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
return {
- index,
- key: `${id}-option-${index}`,
+ key: index,
tabIndex: -1,
role: 'option',
id: `${id}-option-${index}`,
@@ -1027,7 +1027,6 @@ export default function useAutocomplete(props) {
anchorEl,
setAnchorEl,
focusedTag,
- highlightedOptionIndex,
groupedOptions,
};
}