From 26f695d40134327db783fdce8d6b574a9dd169c7 Mon Sep 17 00:00:00 2001
From: pkupczyk <piotr.kupczyk@id.ethz.ch>
Date: Tue, 22 Dec 2020 11:12:52 +0100
Subject: [PATCH] NG_UI : plugins evaluation : SSDM-10431 - refactor
autocompleter and fix automated tests
---
.../common/form/AutocompleterField.jsx | 49 +++++++++++--------
.../common/form/EntityAutocompleterField.jsx | 33 +++----------
.../tools/form/query/QueryFormParameters.jsx | 1 +
.../types/form/TypeFormParametersProperty.jsx | 3 +-
4 files changed, 38 insertions(+), 48 deletions(-)
diff --git a/openbis_ng_ui/src/js/components/common/form/AutocompleterField.jsx b/openbis_ng_ui/src/js/components/common/form/AutocompleterField.jsx
index f526082d1eb..56e1313a3e4 100644
--- a/openbis_ng_ui/src/js/components/common/form/AutocompleterField.jsx
+++ b/openbis_ng_ui/src/js/components/common/form/AutocompleterField.jsx
@@ -31,11 +31,6 @@ const styles = theme => ({
}
},
adornment: {
- marginRight: '-32px',
- marginTop: '-16px',
- color: '#0000008a'
- },
- adornmentFreeSolo: {
marginRight: '-4px',
marginTop: '-16px',
color: '#0000008a'
@@ -54,7 +49,8 @@ class AutocompleterFormField extends React.PureComponent {
this.state = {
open: false,
- focused: false
+ focused: false,
+ inputValue: ''
}
this.reference = React.createRef()
@@ -100,18 +96,13 @@ class AutocompleterFormField extends React.PureComponent {
}
handleChange(event, value) {
- this.setState({
- open: true
- })
-
this.handleEvent(event, value, this.props.onChange)
}
handleInputChange(event, value) {
this.setState({
- open: true
+ inputValue: value
})
-
this.handleEvent(event, value, this.props.onInputChange)
}
@@ -119,7 +110,7 @@ class AutocompleterFormField extends React.PureComponent {
this.setState({
focused: true
})
- this.handleEvent(event, null, this.props.onFocus)
+ this.handleEvent(event, event.target.value, this.props.onFocus)
}
handleBlur(event) {
@@ -130,8 +121,28 @@ class AutocompleterFormField extends React.PureComponent {
event.persist()
+ const { freeSolo, getOptionLabel } = this.props
+ const { inputValue } = this.state
+
+ const value = getOptionLabel
+ ? getOptionLabel(this.props.value)
+ : this.props.value
+
+ const valueTrimmed = value ? value.trim() : ''
+ const inputValueTrimmed = inputValue ? inputValue.trim() : ''
+
+ if (inputValueTrimmed.length === 0 && valueTrimmed.length !== 0) {
+ this.handleChange(event, null)
+ } else if (inputValueTrimmed !== valueTrimmed) {
+ if (freeSolo) {
+ this.handleChange(event, inputValue)
+ } else {
+ this.handleInputChange(event, value)
+ }
+ }
+
setTimeout(() => {
- this.handleEvent(event, null, this.props.onBlur)
+ this.handleEvent(event, this.state.value, this.props.onBlur)
}, 0)
}
@@ -174,8 +185,6 @@ class AutocompleterFormField extends React.PureComponent {
name,
description,
value,
- inputValue,
- freeSolo,
disabled,
error,
metadata,
@@ -189,7 +198,7 @@ class AutocompleterFormField extends React.PureComponent {
getOptionDisabled
} = this.props
- const { open, focused } = this.state
+ const { open, inputValue, focused } = this.state
return (
<FormFieldContainer
@@ -201,7 +210,7 @@ class AutocompleterFormField extends React.PureComponent {
>
<Autocomplete
disableClearable
- freeSolo={freeSolo}
+ freeSolo={true}
name={name}
disabled={disabled}
options={this.getOptions()}
@@ -268,13 +277,13 @@ class AutocompleterFormField extends React.PureComponent {
renderAdornment() {
const { open } = this.state
- const { loading, freeSolo, classes } = this.props
+ const { loading, classes } = this.props
return (
<InputAdornment
position='end'
classes={{
- root: freeSolo ? classes.adornmentFreeSolo : classes.adornment
+ root: classes.adornment
}}
>
{loading ? <CircularProgress color='inherit' size={20} /> : null}
diff --git a/openbis_ng_ui/src/js/components/common/form/EntityAutocompleterField.jsx b/openbis_ng_ui/src/js/components/common/form/EntityAutocompleterField.jsx
index c5dcee8ec66..7a7133b4f21 100644
--- a/openbis_ng_ui/src/js/components/common/form/EntityAutocompleterField.jsx
+++ b/openbis_ng_ui/src/js/components/common/form/EntityAutocompleterField.jsx
@@ -19,7 +19,6 @@ class EntityAutocompleterField extends React.PureComponent {
this.state = {
loading: false,
- inputValue: this.getOptionLabel(props.value),
options: []
}
}
@@ -316,34 +315,15 @@ class EntityAutocompleterField extends React.PureComponent {
}
}
- handleFocus() {
- this.load(this.state.inputValue)
+ handleFocus(event) {
+ this.load(event.target.value)
}
handleInputChange(event) {
- this.setState({
- inputValue: event.target.value
- })
this.load(event.target.value)
}
- handleBlur(event) {
- const { value, onChange } = this.props
- const { inputValue } = this.state
-
- const valueTrimmed = value ? this.getOptionLabel(value).trim() : ''
- const inputValueTrimmed = inputValue ? inputValue.trim() : ''
-
- if (inputValueTrimmed.length === 0 && valueTrimmed.length !== 0) {
- if (onChange) {
- onChange(event)
- }
- } else if (inputValueTrimmed !== valueTrimmed) {
- this.setState({
- inputValue: this.getOptionLabel(value)
- })
- }
-
+ handleBlur() {
this.cancelScheduledLoad()
this.setState({
@@ -381,22 +361,21 @@ class EntityAutocompleterField extends React.PureComponent {
}
getOptionDisabled(option) {
- return !option.entityId
+ return !option || !option.entityId
}
render() {
logger.log(logger.DEBUG, 'EntityAutocompleterField.render')
const { value } = this.props
- const { loading, inputValue, options } = this.state
+ const { loading, options } = this.state
return (
<AutocompleterField
{...this.props}
loading={loading}
- freeSolo={true}
+ freeSolo={false}
value={value}
- inputValue={inputValue}
renderOption={this.renderOption}
filterOptions={this.filterOptions}
getOptionLabel={this.getOptionLabel}
diff --git a/openbis_ng_ui/src/js/components/tools/form/query/QueryFormParameters.jsx b/openbis_ng_ui/src/js/components/tools/form/query/QueryFormParameters.jsx
index 83c5f2b7979..b6aedb7f28a 100644
--- a/openbis_ng_ui/src/js/components/tools/form/query/QueryFormParameters.jsx
+++ b/openbis_ng_ui/src/js/components/tools/form/query/QueryFormParameters.jsx
@@ -294,6 +294,7 @@ class QueryFormParameters extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ freeSolo={true}
mode={mode}
onChange={this.handleChange}
onFocus={this.handleFocus}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx
index 830a3b2b4b0..db911be6c3e 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx
@@ -298,8 +298,9 @@ class TypeFormParametersProperty extends React.PureComponent {
error={error}
disabled={!enabled}
value={value}
+ freeSolo={true}
mode={mode}
- onInputChange={this.handleChange}
+ onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
/>
--
GitLab