[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