djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix single autocomplete inputs

Browse source
This commit is contained in:
Magdalena Markusik 2020-10-22 10:33:01 +02:00
parent 03aafd8b63
commit bfdeb0d654
1 changed files with 31 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -1,7 +1,6 @@
import { InputProps } from "@material-ui/core/Input";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames";
import Downshift, { ControllerStateAndHelpers } from "downshift";
@ -74,8 +73,6 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
} = props;
const classes = useStyles(props);
const [prevDisplayValue] = useStateFromProps(displayValue);
const handleChange = (
item: string,
stateAndHelpers: ControllerStateAndHelpers
@ -116,23 +113,45 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
choices && selectedItem
? choices.filter(c => c.value === selectedItem).length === 0
: false;
const hasInputValueChanged = prevDisplayValue !== displayValue;
if (hasInputValueChanged) {
const choiceFromInputValue = choices.find(
({ value: choiceId }) => choiceId === inputValue
);
const isValueInValues = !!choiceFromInputValue;
const isValueInLabels = !!choices.find(
choice => choice.label === inputValue
);
const ensureProperValues = (alwaysCheck: boolean = false) => {
if (allowCustomValues && !alwaysCheck) {
return;
}
if (isValueInValues && !isValueInLabels) {
reset({ inputValue: choiceFromInputValue.label });
return;
}
reset({ inputValue: displayValue });
}
};
const displayCustomValue =
const displayCustomValue = !!(
inputValue &&
inputValue.length > 0 &&
allowCustomValues &&
!choices.find(
choice =>
choice.label.toLowerCase() === inputValue.toLowerCase()
);
!isValueInLabels
);
const handleBlur = () => {
if(inputValue)
ensureProperValues(true);
closeMenu();
};
// fix for bug where input value is returned from debounce as id instead of label
if (value === inputValue && inputValue !== "") {
ensureProperValues();
}
return (