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

Merge pull request #786 from mirumee/Fix-single-autocomplete-select-inputs

Browse source 
Fix single autocomplete select inputs
This commit is contained in:
Marcin Gębala 2020-10-23 10:04:28 +02:00 committed by GitHub
commit 1bfc13c8b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
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,20 +113,46 @@ 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 || isValueInLabels) && !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 = () => {
ensureProperValues(true);
closeMenu();
};
// fix for bug where input value is returned from debounce as id instead of label
if (value === inputValue && inputValue !== "") {
ensureProperValues();
}
return (
<div
@ -149,7 +172,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
),
error,
id: undefined,
onBlur: closeMenu,
onBlur: handleBlur,
onClick: toggleMenu
}}
error={error}