projects
/
arvados-workbench2.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Merge branch 'master' into 14603-add-controlled-vocabulary-to-advanced-search
[arvados-workbench2.git]
/
src
/
components
/
autocomplete
/
autocomplete.tsx
diff --git
a/src/components/autocomplete/autocomplete.tsx
b/src/components/autocomplete/autocomplete.tsx
index c5811bb6ea716b44692752c68d7f630d61208e7f..52918c34ab47ee68c009cff6bd5bfdb42b80598b 100644
(file)
--- a/
src/components/autocomplete/autocomplete.tsx
+++ b/
src/components/autocomplete/autocomplete.tsx
@@
-15,6
+15,7
@@
export interface AutocompleteProps<Item, Suggestion> {
suggestions?: Suggestion[];
error?: boolean;
helperText?: string;
suggestions?: Suggestion[];
error?: boolean;
helperText?: string;
+ autofocus?: boolean;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
@@
-29,6
+30,7
@@
export interface AutocompleteState {
suggestionsOpen: boolean;
selectedSuggestionIndex: number;
}
suggestionsOpen: boolean;
selectedSuggestionIndex: number;
}
+
export class Autocomplete<Value, Suggestion> extends React.Component<AutocompleteProps<Value, Suggestion>, AutocompleteState> {
state = {
export class Autocomplete<Value, Suggestion> extends React.Component<AutocompleteProps<Value, Suggestion>, AutocompleteState> {
state = {
@@
-59,6
+61,7
@@
export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
renderInput() {
return <Input
renderInput() {
return <Input
+ autoFocus={this.props.autofocus}
inputRef={this.inputRef}
value={this.props.value}
startAdornment={this.renderChips()}
inputRef={this.inputRef}
value={this.props.value}
startAdornment={this.renderChips()}
@@
-124,7
+127,7
@@
export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
if (event.key === 'Enter') {
if (this.isSuggestionBoxOpen() && selectedSuggestionIndex < suggestions.length) {
// prevent form submissions when selecting a suggestion
if (event.key === 'Enter') {
if (this.isSuggestionBoxOpen() && selectedSuggestionIndex < suggestions.length) {
// prevent form submissions when selecting a suggestion
- event.preventDefault();
+ event.preventDefault();
onSelect(suggestions[selectedSuggestionIndex]);
} else if (this.props.value.length > 0) {
onCreate();
onSelect(suggestions[selectedSuggestionIndex]);
} else if (this.props.value.length > 0) {
onCreate();
@@
-149,6
+152,15
@@
export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
renderChips() {
const { items, onDelete } = this.props;
renderChips() {
const { items, onDelete } = this.props;
+
+ /**
+ * If input startAdornment prop is not undefined, input's label will stay above the input.
+ * If there is not items, we want the label to go back to placeholder position.
+ */
+ if (items.length === 0) {
+ return;
+ }
+
return items.map(
(item, index) =>
<Chip
return items.map(
(item, index) =>
<Chip