diff --git a/src/components/Autocomplete/Autocomplete.react.js b/src/components/Autocomplete/Autocomplete.react.js
index 6e0647baa..9e28d5b80 100644
--- a/src/components/Autocomplete/Autocomplete.react.js
+++ b/src/components/Autocomplete/Autocomplete.react.js
@@ -63,6 +63,11 @@ export default class Autocomplete extends Component {
this.recalculatePosition();
this._ignoreBlur = false;
this._suggestionClicked = false;
+ if(this.props.autoFocus){
+ setTimeout(() => {
+ this.inputRef.current.focus();
+ }, 0);
+ }
}
componentWillUnmount() {
@@ -246,27 +251,17 @@ export default class Autocomplete extends Component {
onKeyDown(e) {
const { activeSuggestion, filteredSuggestions } = this.state;
- // Enter
- const { userInput } = this.state;
-
- if (e.keyCode === 13) {
- if (userInput && userInput.length > 0) {
- this.props.onSubmit(userInput);
- }
- } else if (e.keyCode === 9) {
- // Tab
- // do not type it
- e.preventDefault();
-
- e.stopPropagation();
- // move focus to input
- this.inputRef.current.focus();
+ if (e.keyCode === 13 || e.key === 'Enter') {
this.setState({
active: true,
activeSuggestion: 0,
showSuggestions: false,
userInput: filteredSuggestions[activeSuggestion]
});
+ } else if (e.keyCode === 9) {
+ this.setState({
+ showSuggestions: false,
+ });
} else if (e.keyCode === 38) {
// arrow up
if (activeSuggestion === 0) {
@@ -279,7 +274,7 @@ export default class Autocomplete extends Component {
});
} else if (e.keyCode === 40) {
// arrow down
- if (activeSuggestion - 1 === filteredSuggestions.length) {
+ if (activeSuggestion === filteredSuggestions.length - 1) {
return;
}
@@ -341,6 +336,7 @@ export default class Autocomplete extends Component {
activeSuggestion={activeSuggestion}
onClick={onClick}
onMouseDown={onMouseDown}
+ onKeyDown={onKeyDown}
/>
);
}
@@ -351,7 +347,7 @@ export default class Autocomplete extends Component {
{
let setFocus = useCallback((input) => {
@@ -136,6 +137,7 @@ let FilterRow = ({
onChange={onChangeField}
buildSuggestions={buildSuggestions}
buildLabel={() => ''}
+ autoFocus={autoFocus}
/>
+
{content}
);
diff --git a/src/components/Filter/Filter.react.js b/src/components/Filter/Filter.react.js
index d7bfd75e2..47c2ca104 100644
--- a/src/components/Filter/Filter.react.js
+++ b/src/components/Filter/Filter.react.js
@@ -112,6 +112,7 @@ let Filter = ({ schema, filters, renderRow, onChange, onSearch, blacklist, class
currentConstraint: constraint,
compareTo,
key: field + '-' + constraint + '-' + i,
+ autoFocus: i === 0,
onChangeField: newField => {
onChange(changeField(schema, filters, i, newField));
diff --git a/src/components/SuggestionsList/SuggestionsList.react.js b/src/components/SuggestionsList/SuggestionsList.react.js
index b2db0777c..5b11b895c 100644
--- a/src/components/SuggestionsList/SuggestionsList.react.js
+++ b/src/components/SuggestionsList/SuggestionsList.react.js
@@ -43,7 +43,8 @@ export default class Suggestion extends React.Component {
suggestionsItemStyle,
activeSuggestion,
onClick,
- onMouseDown} = this.props;
+ onMouseDown,
+ onKeyDown} = this.props;
return (
-
+
{suggestions.map((suggestion, index) => {
let className;
if (index === activeSuggestion) {
diff --git a/src/components/SuggestionsList/SuggestionsList.scss b/src/components/SuggestionsList/SuggestionsList.scss
index 1314d0ba8..fee2b7241 100644
--- a/src/components/SuggestionsList/SuggestionsList.scss
+++ b/src/components/SuggestionsList/SuggestionsList.scss
@@ -26,9 +26,8 @@
.active,
.suggestions li:hover {
- color: #0e69a1;
+ background-color: #159cee !important;
cursor: pointer;
- font-weight: 500;
}
.suggestions li:not(:last-of-type) {
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index a99cac7c1..0c4b20049 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -95,6 +95,10 @@ class Browser extends DashboardView {
useMasterKey: true,
currentUser: Parse.User.current(),
+
+ shortcutsMenu: {
+ showFilters: false
+ },
};
this.prefetchData = this.prefetchData.bind(this);
@@ -155,6 +159,7 @@ class Browser extends DashboardView {
this.abortEditCloneRow = this.abortEditCloneRow.bind(this);
this.cancelPendingEditRows = this.cancelPendingEditRows.bind(this);
this.redirectToFirstClass = this.redirectToFirstClass.bind(this);
+ this.handleKeyPress = this.handleKeyPress.bind(this);
this.dataBrowserRef = React.createRef();
@@ -187,12 +192,14 @@ class Browser extends DashboardView {
setTimeout(function() { this.props.navigate(pathname) }.bind(this))
}
}
+ document.addEventListener('keydown', this.handleKeyPress);
}
componentWillUnmount() {
if (window.localStorage) {
window.localStorage.setItem(BROWSER_LAST_LOCATION, this.props.location.pathname + this.props.location.search);
}
+ document.removeEventListener('keydown', this.handleKeyPress);
}
componentWillReceiveProps(nextProps, nextContext) {
@@ -1608,6 +1615,14 @@ class Browser extends DashboardView {
this.setState({ showPointerKeyDialog: false });
}
+ handleKeyPress = (event) => {
+ if(document.activeElement.tagName === 'BODY') {
+ if (event.keyCode === 70) {
+ this.setState(prevState => ({ shortcutsMenu: { showFilters: !prevState.shortcutsMenu.showFilters }}));
+ }
+ }
+ }
+
renderContent() {
let browser = null;
let className = this.props.params.className;
@@ -1717,6 +1732,7 @@ class Browser extends DashboardView {
onAddRowWithModal={this.addRowWithModal}
onAddClass={this.showCreateClass}
showNote={this.showNote}
+ shortcutsMenu={this.state.shortcutsMenu}
/>
);
}
diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
index 73824bc86..63f87b3ac 100644
--- a/src/dashboard/Data/Browser/BrowserToolbar.react.js
+++ b/src/dashboard/Data/Browser/BrowserToolbar.react.js
@@ -71,6 +71,8 @@ let BrowserToolbar = ({
login,
logout,
toggleMasterKeyUsage,
+
+ shortcutsMenu,
}) => {
let selectionLength = Object.keys(selection).length;
let isPendingEditCloneRows = editCloneRows && editCloneRows.length > 0;
@@ -280,6 +282,7 @@ let BrowserToolbar = ({
className={classNameForEditors}
blacklistedFilters={onAddRow ? [] : ['unique']}
disabled={isPendingEditCloneRows}
+ showFilters={shortcutsMenu.showFilters}
/>
{onAddRow && }
{perms && enableSecurityDialog ? (