[ARVADOS-WORKBENCH2] updated: 1.2.0-746-g2f14e8e
Git user
git at public.curoverse.com
Sun Oct 28 10:23:01 EDT 2018
Summary of changes:
src/components/autocomplete/autocomplete.tsx | 57 +++++++++++++++++-----------
1 file changed, 35 insertions(+), 22 deletions(-)
via 2f14e8e6ff2dabed511301338a917fbf4226ce12 (commit)
from e70aae2d917d800e25a1c13fcaae3f3d5c95d90f (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 2f14e8e6ff2dabed511301338a917fbf4226ce12
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Sun Oct 28 15:22:46 2018 +0100
Fix autocomplete suggestions hiding on blur
Feature #14365
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
index e2f3547..bc2e60e 100644
--- a/src/components/autocomplete/autocomplete.tsx
+++ b/src/components/autocomplete/autocomplete.tsx
@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Input as MuiInput, Chip as MuiChip, Popper as MuiPopper, Paper, FormControl, InputLabel, StyleRulesCallback, withStyles, RootRef, Menu, MenuItem, ListItemText, ListItem, List } from '@material-ui/core';
+import { Input as MuiInput, Chip as MuiChip, Popper as MuiPopper, Paper, FormControl, InputLabel, StyleRulesCallback, withStyles, RootRef, ListItemText, ListItem, List } from '@material-ui/core';
import { PopperProps } from '@material-ui/core/Popper';
import { WithStyles } from '@material-ui/core/styles';
import { noop } from 'lodash';
@@ -34,6 +34,7 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
containerRef = React.createRef<HTMLDivElement>();
inputRef = React.createRef<HTMLInputElement>();
+
render() {
return (
<RootRef rootRef={this.containerRef}>
@@ -63,6 +64,26 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
/>;
}
+ renderSuggestions() {
+ const { suggestions = [] } = this.props;
+ return (
+ <Popper
+ open={this.state.suggestionsOpen && suggestions.length > 0}
+ anchorEl={this.containerRef.current}>
+ <Paper onMouseDown={this.preventBlur}>
+ <List dense style={{ width: this.getSuggestionsWidth() }}>
+ {suggestions.map(
+ (suggestion, index) =>
+ <ListItem button key={index} onClick={this.handleSelect(suggestion)}>
+ {this.renderSuggestion(suggestion)}
+ </ListItem>
+ )}
+ </List>
+ </Paper>
+ </Popper>
+ );
+ }
+
handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
const { onFocus = noop } = this.props;
this.setState({ suggestionsOpen: true });
@@ -70,9 +91,11 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
}
handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
- const { onBlur = noop } = this.props;
- this.setState({ suggestionsOpen: true });
- onBlur(event);
+ setTimeout(() => {
+ const { onBlur = noop } = this.props;
+ this.setState({ suggestionsOpen: false });
+ onBlur(event);
+ });
}
handleKeyPress = ({ key }: React.KeyboardEvent<HTMLInputElement>) => {
@@ -98,24 +121,14 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
return renderChipValue ? renderChipValue(value) : JSON.stringify(value);
}
- renderSuggestions() {
- const { suggestions } = this.props;
- return suggestions && suggestions.length > 0
- ? <Popper
- open={this.state.suggestionsOpen}
- anchorEl={this.containerRef.current}>
- <Paper>
- <List dense style={{ width: this.getSuggestionsWidth() }}>
- {suggestions.map(
- (suggestion, index) =>
- <ListItem button key={index} onClick={this.handleSelect(suggestion)}>
- {this.renderSuggestion(suggestion)}
- </ListItem>
- )}
- </List>
- </Paper>
- </Popper>
- : null;
+ preventBlur = (event: React.MouseEvent<HTMLElement>) => {
+ event.preventDefault();
+ }
+
+ handleClickAway = (event: React.MouseEvent<HTMLElement>) => {
+ if (event.target !== this.inputRef.current) {
+ this.setState({ suggestionsOpen: false });
+ }
}
handleSelect(suggestion: Suggestion) {
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list